<!DOCTYPE html>
<!-- saved from url=(0030)http://knsv.github.io/mermaid/ -->
<html lang="en" class="fa-events-icons-ready"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
    <link rel="stylesheet" href="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/font-awesome.min.css">

    <link href="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/screen.css" rel="stylesheet" type="text/css" media="screen">
    <link href="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/print.css" rel="stylesheet" type="text/css" media="print">
    <link href="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/mermaid.forest.css" rel="stylesheet" type="text/css">
    <link href="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/solarized_light.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/mermaid.js"></script>
    <script src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/all.js" type="text/javascript"></script>
    <script src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/highlight.pack.js" type="text/javascript"></script>

    <script>
        var g = function (hljs) {
            var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
            var keyw = {
                keyword: 'graph sequenceDiagram participant loop end',
                typename: 'Note',
                literal: "false true left right"
            };
            return {
                case_insensitive: false,
                aliases: ["mermaid"],
                k: keyw,
                i: 'for',
                c: [{
                    cN: "function",
                    b: "^" + r + "\\s*\\(",
                    e: "->",
                    rB: !0,
                    i: "\\(|#|//|/\\*|\\\\|:|;",
                    starts: {
                        e: ";|\\.", k: keyw, c: [
                            {cN: "comment", b: "%", e: "$"}
                        ]
                    }
                },
                    {cN: "comment", b: "%", e: "$"}
                ]
            };
        };
        hljs.registerLanguage('mermaid', g);
        hljs.initHighlightingOnLoad();
        $(function () {
            setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
        });
        var callback = function(){
            alert('A callback was triggered');
        }
    </script>
<link href="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/7065416dc9.css" media="all" rel="stylesheet"><script type="text/javascript" src="chrome-extension://aadgmnobpdmgmigaicncghmmoeflnamj/ng-inspector.js"></script><meta name="chromesniffer" id="chromesniffer_meta" content="{&quot;D3&quot;:&quot;3.5.6&quot;,&quot;Lo-dash&quot;:&quot;4.13.1&quot;,&quot;Font Awesome&quot;:-1}"><script type="text/javascript" src="chrome-extension://fhhdlnnepfjhlhilgmeepgkhjmhhhjkh/js/detector.js"></script></head>

<body class="index" youdao="bind">
<a href="http://knsv.github.io/mermaid/#" id="nav-button">
      <span>
        NAV
        <img src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/navbar.png">
      </span>
</a>

<div class="tocify-wrapper">
    <img src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/logo.png">

    <div class="lang-selector" style="display:none">
        <a href="http://knsv.github.io/mermaid/#" data-language-name="shell">shell</a>
        <a href="http://knsv.github.io/mermaid/#" data-language-name="javascript">javascript</a>
        <a href="http://knsv.github.io/mermaid/#" data-language-name="html">html</a>
        <a href="http://knsv.github.io/mermaid/#" data-language-name="css">css</a>
    </div>
    <div class="search">
        <input type="text" class="search" id="input-search" placeholder="Search">
    </div>
    <ul class="search-results"></ul>
    <div id="toc">
    </div>
    <ul class="toc-footer">
        <div style="margin-left:5px;">
            <iframe allowtransparency="true" scrolling="no" frameborder="0" src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/buttons.html" style="width: 53px; height: 20px; border: none;"></iframe>
            <iframe allowtransparency="true" scrolling="no" frameborder="0" src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/buttons(1).html" style="width: 56px; height: 20px; border: none;"></iframe>
            <iframe allowtransparency="true" scrolling="no" frameborder="0" src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/buttons(2).html" style="width: 87px; height: 20px; border: none;"></iframe>
        </div>
        <script async="" defer="" id="github-bjs" src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/buttons.js"></script>
        <li><a href="http://github.com/tripit/slate" style="color:grey">Documentation Powered by Slate</a></li>
    </ul>
</div>
<div class="page-wrapper">
    <div class="dark-box"></div>
    <div class="content">
        <h1 id="mermaid">mermaid</h1>
<p><img src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/header.png" alt="Alt text"></p>
<blockquote>
<p>Generation of diagrams and flowcharts from text in a similar manner as markdown.</p>
</blockquote>
<p>Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?</p>
<p>This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. <a href="http://knsv.github.io/mermaid/live_editor">Try it using our editor</a>.</p>
<p>Code examples below:</p>
<h3 id="an-example-of-a-flowchart">An example of a flowchart</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">TD</span>;
    <span class="hljs-tag">A--</span>&gt;<span class="hljs-tag">B</span>;
    <span class="hljs-tag">A--</span>&gt;<span class="hljs-tag">C</span>;
    <span class="hljs-tag">B--</span>&gt;<span class="hljs-tag">D</span>;
    <span class="hljs-tag">C--</span>&gt;<span class="hljs-tag">D</span>;</code></pre><h3 id="an-example-of-a-sequence-diagram">An example of a sequence diagram</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">participant</span> <span class="hljs-tag">Alice</span>
    <span class="hljs-tag">participant</span> <span class="hljs-tag">Bob</span>
    <span class="hljs-tag">Alice-</span>&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">John</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">loop</span> <span class="hljs-tag">Healthcheck</span>
        <span class="hljs-tag">John-</span>&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Fight</span> <span class="hljs-tag">against</span> <span class="hljs-tag">hypochondria</span>
    <span class="hljs-tag">end</span>
    <span class="hljs-tag">Note</span> <span class="hljs-tag">right</span> <span class="hljs-tag">of</span> <span class="hljs-tag">John</span>: <span class="hljs-tag">Rational</span> <span class="hljs-tag">thoughts</span> &lt;<span class="hljs-tag">br</span>/&gt;<span class="hljs-tag">prevail</span>...
    <span class="hljs-tag">John--</span>&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Great</span>!
    <span class="hljs-tag">John-</span>&gt;<span class="hljs-tag">Bob</span>: <span class="hljs-tag">How</span> <span class="hljs-tag">about</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">Bob--</span>&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Jolly</span> <span class="hljs-tag">good</span>!</code></pre><h3 id="example-code-for-a-gantt-diagram">Example code for a gantt diagram</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">gantt</span>
        <span class="hljs-tag">dateFormat</span>  <span class="hljs-tag">YYYY-MM-DD</span>
        <span class="hljs-tag">title</span> <span class="hljs-tag">Adding</span> <span class="hljs-tag">GANTT</span> <span class="hljs-tag">diagram</span> <span class="hljs-tag">functionality</span> <span class="hljs-tag">to</span> <span class="hljs-tag">mermaid</span>
        <span class="hljs-tag">section</span> <span class="hljs-tag">A</span> <span class="hljs-tag">section</span>
        <span class="hljs-tag">Completed</span> <span class="hljs-tag">task</span>            <span class="hljs-pseudo">:done</span>,    <span class="hljs-tag">des1</span>, 2014<span class="hljs-tag">-01-06</span>,2014<span class="hljs-tag">-01-08</span>
        <span class="hljs-tag">Active</span> <span class="hljs-tag">task</span>               <span class="hljs-pseudo">:active</span>,  <span class="hljs-tag">des2</span>, 2014<span class="hljs-tag">-01-09</span>, 3<span class="hljs-tag">d</span>
        <span class="hljs-tag">Future</span> <span class="hljs-tag">task</span>               :         <span class="hljs-tag">des3</span>, <span class="hljs-tag">after</span> <span class="hljs-tag">des2</span>, 5<span class="hljs-tag">d</span>
        <span class="hljs-tag">Future</span> <span class="hljs-tag">task2</span>               :         <span class="hljs-tag">des4</span>, <span class="hljs-tag">after</span> <span class="hljs-tag">des3</span>, 5<span class="hljs-tag">d</span>
        <span class="hljs-tag">section</span> <span class="hljs-tag">Critical</span> <span class="hljs-tag">tasks</span>
        <span class="hljs-tag">Completed</span> <span class="hljs-tag">task</span> <span class="hljs-tag">in</span> <span class="hljs-tag">the</span> <span class="hljs-tag">critical</span> <span class="hljs-tag">line</span> <span class="hljs-pseudo">:crit</span>, <span class="hljs-tag">done</span>, 2014<span class="hljs-tag">-01-06</span>,24<span class="hljs-tag">h</span>
        <span class="hljs-tag">Implement</span> <span class="hljs-tag">parser</span> <span class="hljs-tag">and</span> <span class="hljs-tag">jison</span>          <span class="hljs-pseudo">:crit</span>, <span class="hljs-tag">done</span>, <span class="hljs-tag">after</span> <span class="hljs-tag">des1</span>, 2<span class="hljs-tag">d</span>
        <span class="hljs-tag">Create</span> <span class="hljs-tag">tests</span> <span class="hljs-tag">for</span> <span class="hljs-tag">parser</span>             <span class="hljs-pseudo">:crit</span>, <span class="hljs-tag">active</span>, 3<span class="hljs-tag">d</span>
        <span class="hljs-tag">Future</span> <span class="hljs-tag">task</span> <span class="hljs-tag">in</span> <span class="hljs-tag">critical</span> <span class="hljs-tag">line</span>        <span class="hljs-pseudo">:crit</span>, 5<span class="hljs-tag">d</span>
        <span class="hljs-tag">Create</span> <span class="hljs-tag">tests</span> <span class="hljs-tag">for</span> <span class="hljs-tag">renderer</span>           <span class="hljs-pseudo">:2d</span>
        <span class="hljs-tag">Add</span> <span class="hljs-tag">to</span> <span class="hljs-tag">mermaid</span>                      <span class="hljs-pseudo">:1d</span></code></pre><p>Play with mermaid using this <a href="http://danielmschmidt.github.io/mermaid-demo/">editor</a> or this <a href="http://knsv.github.io/mermaid/live_editor">live editor</a>.</p>
<h2 id="credits">Credits</h2>
<p>Many thanks to the <a href="http://d3js.org/">d3</a> and <a href="https://github.com/cpettitt/dagre-d3">dagre-d3</a> projects for providing<br>the graphical layout and drawing libraries! Thanks also to the<br><a href="http://bramp.github.io/js-sequence-diagrams">js-sequence-diagram</a> project for usage of the grammar for the<br>sequence diagrams.</p>
<p><em>Mermaid was created by Knut Sveidqvist for easier documentation.</em></p>
<p>Knut has not done all work by himself, here is the full list of the projects <a href="https://github.com/knsv/mermaid/graphs/contributors">contributors</a>.</p>
<h1 id="downstream-projects">Downstream projects</h1>
<p>Mermaid is supported in a number of publishing systems and editors. Please report if a plugin/editor is missing from the list below:</p>
<ul>
<li>Support in LightPaper 1.2+. <a href="https://github.com/42Squares/LightPaper/blob/master/doc/Adding%20Mermaid%20Diagrams.md">Howto</a>. Discout with code MERMAID_25</li>
<li><a href="https://github.com/JozoVilcek/gitbook-plugin-mermaid">gitbook-plugin</a></li>
<li>light table</li>
<li><a href="https://marketplace.atlassian.com/plugins/org.anvard.atlassian.mermaid-plugin/server/overview">Confluence plugin</a></li>
<li><a href="http://nauvalatmaja.com/2015/01/13/rendering-mermaid-in-docpad/">Using mermaid via docpad</a></li>
<li><a href="https://rubygems.org/gems/jekyll-mermaid/versions/1.0.0">Using mermaid in Jekyll</a></li>
<li><a href="http://mostlyblather.com/blog/2015/05/23/mermaid-jekyll-octopress/">Using mermaid via Octopress</a></li>
<li><a href="http://pad.haroopress.com/user.html">Mardown editor Haroopad</a></li>
<li><a href="https://atom.io/packages/atom-mermaid">Plugin for atom</a></li>
<li><a href="http://mdp.tylingsoft.com/">Markdown Plus</a></li>
<li><a href="https://github.com/kannokanno/previm">Vim Plugin</a></li>
<li><a href="https://github.com/mgaitan/sphinxcontrib-mermaid">Sphinx extension</a></li>
<li><a href="https://github.com/raghur/mermaid-filter">Pandoc filter</a></li>
<li><a href="https://github.com/sinedied/hads">hads</a></li>
</ul>
<h1 id="online-live-editor">Online live editor</h1>
<p>An editor is available for creating diagrams. With it you can quickly start writing mermaid diagrams. It is possible to:</p>
<ul>
<li>save the result as a svg</li>
<li>get a link to a viewer of the diagram</li>
<li><p>get a link to edit of the diagram to share a diagram so that someone else can tweak it and send a new link back</p>
</li>
<li><p><a href="http://knsv.github.io/mermaid/live_editor">Editor</a></p>
</li>
</ul>

<h1 id="usage">Usage</h1>
<h2 id="installation">Installation</h2>
<p>Either use the npm or bower package managers as per below:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">bower</span> <span class="hljs-tag">install</span> <span class="hljs-tag">mermaid</span> <span class="hljs-tag">--save-dev</span></code></pre><pre class="css"><code class="hljs"><span class="hljs-tag">npm</span> <span class="hljs-tag">install</span> <span class="hljs-tag">mermaid</span> <span class="hljs-tag">--save-dev</span></code></pre><p>Or download a javascript bundle and a stylesheet, e.g. the urls below are for the default style and the all-in-one javascript - note that #version# should be replaced with version of choice:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">https</span>://<span class="hljs-tag">cdn</span><span class="hljs-class">.rawgit</span><span class="hljs-class">.com</span>/<span class="hljs-tag">knsv</span>/<span class="hljs-tag">mermaid</span>/<span class="hljs-id">#version</span>#/<span class="hljs-tag">dist</span>/<span class="hljs-tag">mermaid</span><span class="hljs-class">.css</span>
<span class="hljs-tag">https</span>://<span class="hljs-tag">cdn</span><span class="hljs-class">.rawgit</span><span class="hljs-class">.com</span>/<span class="hljs-tag">knsv</span>/<span class="hljs-tag">mermaid</span>/<span class="hljs-id">#version</span>#/<span class="hljs-tag">dist</span>/<span class="hljs-tag">mermaid</span><span class="hljs-class">.min</span><span class="hljs-class">.js</span></code></pre><p>Ex:</p>
<ul>
<li><a href="https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js">js version 6.0.0</a></li>
</ul>
<p>Checkout the <a href="https://github.com/knsv/mermaid/releases">latest version</a> and <a href="https://github.com/knsv/mermaid/tree/master/dist">other styles</a> such as <code>forest</code> and <code>dark</code>.</p>
<p>There are some bundles to choose from:</p>
<ul>
<li>mermaid.js, mermaid.min.js This bundle contains all the javascript libraries you need to run mermaid</li>
<li>mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place</li>
<li>mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.</li>
</ul>
<p><strong> Important: </strong></p>
<blockquote>
<p>It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.</p>
</blockquote>
<p>Read more about that at <a href="https://rawgit.com/">https://rawgit.com/</a></p>
<h2 id="simple-usage-on-a-web-page">Simple usage on a web page</h2>
<p>The easiest way to integrate mermaid on a web page requires two elements:</p>
<ol>
<li>Inclusion of the mermaid framework in the html page using a script tag</li>
<li>A graph definition on the web page</li>
</ol>
<p>If these things are in place mermaid listens to the page load event and when fires, when the page has loaded, it will<br>locate the graphs n the page and transform them to svg files.</p>
<h3 id="include-mermaid-on-your-web-page-">Include mermaid on your web page:</h3>
<pre class="css"><code class="hljs"><link rel="stylesheet" href="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/mermaid.css">
&lt;<span class="hljs-tag">script</span> <span class="hljs-tag">src</span>="<span class="hljs-tag">mermaid</span><span class="hljs-class">.min</span><span class="hljs-class">.js</span>"&gt;&lt;/<span class="hljs-tag">script</span>&gt;
&lt;<span class="hljs-tag">script</span>&gt;<span class="hljs-tag">mermaid</span><span class="hljs-class">.initialize</span>(<span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">startOnLoad</span>:<span class="hljs-value">true</span></span></span>});&lt;/<span class="hljs-tag">script</span>&gt;</code></pre><p>Further down on your page mermaid will look for tags with <code>class="mermaid"</code>. From these tags mermaid will try to<br>read the chart definiton which will be replaced with the svg chart.</p>
<h3 id="define-a-chart-like-this-">Define a chart like this:</h3>
<pre class="css"><code class="hljs">&lt;<span class="hljs-tag">div</span> <span class="hljs-tag">class</span>="<span class="hljs-tag">mermaid</span>"&gt;
    <span class="hljs-tag">CHART</span> <span class="hljs-tag">DEFINITION</span> <span class="hljs-tag">GOES</span> <span class="hljs-tag">HERE</span>
&lt;/<span class="hljs-tag">div</span>&gt;</code></pre><p>Would end up like this:</p>
<pre class="css"><code class="hljs">&lt;<span class="hljs-tag">div</span> <span class="hljs-tag">class</span>="<span class="hljs-tag">mermaid</span>" <span class="hljs-tag">id</span>="<span class="hljs-tag">mermaidChart0</span>"&gt;
    &lt;<span class="hljs-tag">svg</span>&gt;
        <span class="hljs-tag">Chart</span> <span class="hljs-tag">ends</span> <span class="hljs-tag">up</span> <span class="hljs-tag">here</span>
    &lt;/<span class="hljs-tag">svg</span>&gt;
&lt;/<span class="hljs-tag">div</span>&gt;</code></pre><p>An id is also added to mermaid tags without id.</p>
<h3 id="simple-full-example">Simple full example:</h3>
<code>




  
  <!-- Downloaded as per http://knsv.github.io/mermaid/#installation -->
  <!-- Stored in the same directory as html file                     -->
  <link rel="stylesheet" href="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/mermaid.css">

  <!-- Optional to use fontawesome                                   -->
  <!-- Downloaded as per http://fontawesome.io/get-started/          -->
  <!-- Stored in the same directory as html file                     -->
  <script src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/7065416dc9.js"></script>




  <!-- Include mermaid on your web page:                             -->
  <script src="./mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown._files/mermaid.min.js"></script>
  <script>mermaid.initialize({startOnLoad:true});</script>

  <div class="mermaid" data-processed="true"><svg id="mermaidChart0" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 304 186" style="max-width:304px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart0 .node&gt;rect { ; }
#mermaidChart0 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart0 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart0 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.fa { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: 1; font-family: FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased;}
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M47,83L72,83L97,83" marker-end="url(#arrowhead13)" style="fill:none"></path><defs><marker id="arrowhead13" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 0 0 L 0 0 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M124,67.57142857142857L149,39L174,39" marker-end="url(#arrowhead14)" style="fill:none"></path><defs><marker id="arrowhead14" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M124,98.42857142857143L149,127L203,127" marker-end="url(#arrowhead15)" style="fill:none"></path><defs><marker id="arrowhead15" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(33.5,83)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(110.5,83)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">B</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="C" transform="translate(219,39)"><rect rx="0" ry="0" x="-45" y="-19" width="90" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-35,-9)"><foreignobject width="70" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><i class="fa fa-ban"></i> forbidden</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="D" transform="translate(219,127)"><rect rx="5" ry="5" x="-16" y="-19" width="32" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-6,-9)"><foreignobject width="12" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><i class="fa fa-spinner"></i></div></foreignobject></g></g></g></g></g></g></svg></div>



<code>
<h3 id="labels-out-of-bounds">Labels out of bounds</h3>
<p>If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the<br>whole page to have been loaded (dom + assets, particularly the fonts file).</p>
<p>$(document).load(function() {<br>    mermaid.initialize();<br>});<br>over</p>
<p>$(document).ready(function() {<br>    mermaid.initialize();<br>});</p>
<p>Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration<br>in mermaid uses the window.load event to start rendering.</p>
<h3 id="calling-mermaid-init-">Calling <strong>mermaid.init</strong></h3>
<p>By default, <strong>mermaid.init</strong> will be called when the document is ready, finding all elements with<br><code>class="mermaid"</code>. If you are adding content after mermaid is loaded, or otherwise need<br>finer-grained control of this behavior, you can call <code>init</code> yourself with:</p>
<ul>
<li>a configuration object</li>
<li>some nodes, as<ul>
<li>a node</li>
<li>an a array-like of nodes</li>
<li>or W3C selector that will find your nodes</li>
</ul>
</li>
</ul>
<p>Example:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaid</span><span class="hljs-class">.init</span>(<span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">noteMargin</span>:<span class="hljs-value"> <span class="hljs-number">10</span></span></span></span>}, "<span class="hljs-class">.someOtherClass</span>");</code></pre><p>Or with no config object, and a jQuery selection:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaid</span><span class="hljs-class">.init</span>(<span class="hljs-tag">undefined</span>, $("<span class="hljs-id">#someId</span> <span class="hljs-class">.yetAnotherClass</span>"));</code></pre><aside class="warning">This type of integration is deprecated instead the preferred way of handling more complex integration is to us the mermaidAPI instead.</aside>

<h2 id="usage-with-browserify">Usage with browserify</h2>
<p>The reader is assumed to know about CommonJS style of module handling and how to use browserify. If not a good place<br>to start would be <a href="http://browserify.org/">http://browserify.org/</a> website.</p>
<p>Minimalistic javascript:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaid</span> = <span class="hljs-tag">require</span>('<span class="hljs-tag">mermaid</span>');
<span class="hljs-tag">console</span><span class="hljs-class">.log</span>('<span class="hljs-tag">Test</span> <span class="hljs-tag">page</span>! <span class="hljs-tag">mermaid</span> <span class="hljs-tag">version</span>'+<span class="hljs-tag">mermaid</span><span class="hljs-class">.version</span>());</code></pre><p>Bundle the javascript with browserify.</p>
<p>Us the created bundle on a web page as per example below:</p>
<pre class="css"><code class="hljs">&lt;!<span class="hljs-tag">DOCTYPE</span> <span class="hljs-tag">html</span>&gt;
&lt;<span class="hljs-tag">html</span>&gt;
&lt;<span class="hljs-tag">head</span>&gt;
    &lt;<span class="hljs-tag">meta</span> <span class="hljs-tag">charset</span>="<span class="hljs-tag">UTF-8</span>"&gt;
    &lt;<span class="hljs-tag">link</span> <span class="hljs-tag">rel</span>="<span class="hljs-tag">stylesheet</span>" <span class="hljs-tag">href</span>="<span class="hljs-tag">mermaid</span><span class="hljs-class">.css</span>" /&gt;
    &lt;<span class="hljs-tag">script</span> <span class="hljs-tag">src</span>="<span class="hljs-tag">bundle</span><span class="hljs-class">.js</span>"&gt;&lt;/<span class="hljs-tag">script</span>&gt;
&lt;/<span class="hljs-tag">head</span>&gt;
&lt;<span class="hljs-tag">body</span>&gt;
    &lt;<span class="hljs-tag">div</span> <span class="hljs-tag">class</span>="<span class="hljs-tag">mermaid</span>"&gt;
        <span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
            <span class="hljs-tag">A--</span>&gt;<span class="hljs-tag">B</span>
            <span class="hljs-tag">B--</span>&gt;<span class="hljs-tag">C</span>
            <span class="hljs-tag">C--</span>&gt;<span class="hljs-tag">A</span>
            <span class="hljs-tag">D--</span>&gt;<span class="hljs-tag">C</span>
    &lt;/<span class="hljs-tag">div</span>&gt;
&lt;/<span class="hljs-tag">body</span>&gt;
&lt;/<span class="hljs-tag">html</span>&gt;</code></pre><h2 id="api-usage">API usage</h2>
<p>The main idea with the API is to be able to call a render function with graph defintion as a string. The render function<br>will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to<br>fetch the graph definition from the site, perhaps from a textarea, render it and place the graph somewhere in the site.</p>
<p>To do this, include mermaidAPI on your web website instead of mermaid.js. The example below show an outline of how this<br>could be used. The example just logs the resulting svg to the javascript console.</p>
<pre class="css"><code class="hljs">&lt;<span class="hljs-tag">script</span> <span class="hljs-tag">src</span>="<span class="hljs-tag">mermaidAPI</span><span class="hljs-class">.js</span>"&gt;&lt;/<span class="hljs-tag">script</span>&gt;

&lt;<span class="hljs-tag">script</span>&gt;
    <span class="hljs-tag">mermaidAPI</span><span class="hljs-class">.initialize</span>(<span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">startOnLoad</span>:<span class="hljs-value">false
    </span></span></span>});
    $(<span class="hljs-tag">function</span>()<span class="hljs-rules">{
    <span class="hljs-rule">// <span class="hljs-attribute">Example of using the API
        var element = document.querySelector("#graphDiv");

        var insertSvg = function(svgCode, bindFunctions){
            element.innerHTML = svgCode;
        };

        var graphDefinition = 'graph TB\na--&gt;b';
        var graph = mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
    });
&lt;/script&gt;</span></span></span></code></pre><h2 id="sample-of-api-usage-together-with-browserify">Sample of API usage together with browserify</h2>
<pre class="css"><code class="hljs">$ = <span class="hljs-tag">require</span>('<span class="hljs-tag">jquery</span>');
<span class="hljs-tag">mermaidAPI</span> = <span class="hljs-tag">require</span>('<span class="hljs-tag">mermaid</span>')<span class="hljs-class">.mermaidAPI</span>;
<span class="hljs-tag">mermaidAPI</span><span class="hljs-class">.initialize</span>(<span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">startOnLoad</span>:<span class="hljs-value">false
    </span></span></span>});

$(<span class="hljs-tag">function</span>()<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">var graphDefinition = 'graph TB\na--&gt;b';
    var cb = function(html){
        console.log(html);
    }
    mermaidAPI.render('id1',graphDefinition,cb);
});</span></span></span></code></pre><h3 id="binding-events">Binding events</h3>
<p>Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must<br>add those events after the graph has been inserted into the DOM.</p>
<p>The example code below is an extract of wheat mermaid does when using the API. The example show how it is possible to<br>bind events to a svg when using the API for rendering.</p>
<pre class="css"><code class="hljs">     <span class="hljs-tag">var</span> <span class="hljs-tag">insertSvg</span> = <span class="hljs-tag">function</span>(<span class="hljs-tag">svgCode</span>, <span class="hljs-tag">bindFunctions</span>)<span class="hljs-rules">{
         <span class="hljs-rule"><span class="hljs-attribute">element.innerHTML = svgCode;
         if(typeof callback !== 'undefined'){
             callback(id);
         }
         bindFunctions(element);
     };

     var id = 'theGraph';


     mermaidAPI.render(id,txt,insertSvg, element);</span></span></span></code></pre><ol>
<li>The graph is generated using the render call. </li>
<li>After generation the render function calls the provided callback function, in this case its called insertSvg.</li>
<li>The callback function is called with two parameters, the svg code of the generated graph and a function. This<br>function binds events to the svg <strong>after</strong> it is inserted into the DOM.</li>
<li>Insert the svg code into the DOM for presentation</li>
<li>Call the binding function that bainds the events</li>
</ol>
<h2 id="example-of-a-marked-renderer">Example of a marked renderer</h2>
<p>This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.</p>
<pre class="css"><code class="hljs">    <span class="hljs-tag">var</span> <span class="hljs-tag">renderer</span> = <span class="hljs-tag">new</span> <span class="hljs-tag">marked</span><span class="hljs-class">.Renderer</span>();
    <span class="hljs-tag">renderer</span><span class="hljs-class">.code</span> = <span class="hljs-tag">function</span> (<span class="hljs-tag">code</span>, <span class="hljs-tag">language</span>) <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
            return '&lt;div class="mermaid"&gt;'+code+'&lt;/div&gt;';
        }
        else{
            return '&lt;pre&gt;&lt;code&gt;'+code+'&lt;/code&gt;&lt;/pre&gt;';
        }
    };</span></span></span></code></pre><p>Another example in coffeescript that also includes the mermaid script tag into the generated markup.</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">marked</span> = <span class="hljs-tag">require</span> '<span class="hljs-tag">marked</span>'

<span class="hljs-tag">module</span><span class="hljs-class">.exports</span> = (<span class="hljs-tag">options</span>) <span class="hljs-tag">-</span>&gt;
  <span class="hljs-tag">hasMermaid</span> = <span class="hljs-tag">false</span>
  <span class="hljs-tag">renderer</span> = <span class="hljs-tag">new</span> <span class="hljs-tag">marked</span><span class="hljs-class">.Renderer</span>()
  <span class="hljs-tag">renderer</span><span class="hljs-class">.defaultCode</span> = <span class="hljs-tag">renderer</span><span class="hljs-class">.code</span>
  <span class="hljs-tag">renderer</span><span class="hljs-class">.code</span> = (<span class="hljs-tag">code</span>, <span class="hljs-tag">language</span>) <span class="hljs-tag">-</span>&gt;
    <span class="hljs-tag">if</span> <span class="hljs-tag">language</span> <span class="hljs-tag">is</span> '<span class="hljs-tag">mermaid</span>'
      <span class="hljs-tag">html</span> = ''
      <span class="hljs-tag">if</span> <span class="hljs-tag">not</span> <span class="hljs-tag">hasMermaid</span>
        <span class="hljs-tag">hasMermaid</span> = <span class="hljs-tag">true</span>
        <span class="hljs-tag">html</span> += '&amp;<span class="hljs-tag">ltscript</span> <span class="hljs-tag">src</span>="'+<span class="hljs-tag">options</span><span class="hljs-class">.mermaidPath</span>+'"&gt;&lt;/<span class="hljs-tag">script</span>&gt;'
      <span class="hljs-tag">html</span> + '&amp;<span class="hljs-tag">ltdiv</span> <span class="hljs-tag">class</span>="<span class="hljs-tag">mermaid</span>"&gt;'+<span class="hljs-tag">code</span>+'&lt;/<span class="hljs-tag">div</span>&gt;'
    <span class="hljs-tag">else</span>
      <span class="hljs-at_rule">@<span class="hljs-keyword">defaultCode(code,</span> language)

  renderer</span></code></pre><h2 id="advanced-usage">Advanced usage</h2>
<p><strong>Error handling</strong></p>
<p>When the parser encounters invalid syntax the <strong>mermaid.parseError</strong> function is called. It is possible to override this<br>function in order to handle the error in an application specific way.</p>
<p><strong>Parsing text without rendering</strong></p>
<p>It is also possible to validate the syntax before rendering in order to streamline the user experience. The function<br><strong>mermaid.parse(txt)</strong> takes a text string as an argument and returns true if the text is syntactically correct and<br>false if it is not. The parseError function will be called when the parse function returns false.</p>
<p>The code-example below in meta code illustrates how this could work:</p>
<pre class="css"><code class="hljs">
<span class="hljs-tag">mermaid</span><span class="hljs-class">.parseError</span> = <span class="hljs-tag">function</span>(<span class="hljs-tag">err</span>,<span class="hljs-tag">hash</span>)<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">displayErrorInGui(err);
};

var textFieldUpdated = function(){
    var textStr = getTextFromFormField('code');

    if(mermaid.parse(textStr)){
        reRender(textStr)
    }
};

bindEventHandler('change', 'code', textFieldUpdated);</span></span></span></code></pre><h1 id="configuration">Configuration</h1>
<p>Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of<br>setting the options in mermaid.</p>
<ol>
<li>Instantiation of the configuration using the initialize call</li>
<li><em>Using the global mermaid object</em> - deprecated</li>
<li><em>using the global mermaid_config object</em> - deprecated</li>
<li>Instantiation of the configuration using the <strong>mermaid.init</strong> call</li>
</ol>
<p>The list above has two ways to many of doing this. Three are deprecated and will eventually be removed. The list of<br>configuration objects are described <a href="http://knsv.github.io/mermaid/index.html#configuration28">in the mermaidAPI documentation</a>.</p>
<h2 id="using-the-mermaidapi-initialize-mermaid-initialize-call">Using the mermaidAPI.initialize/mermaid.initialize call</h2>
<p>The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPi depending<br>on what kind of integration you use.</p>
<pre class="css"><code class="hljs">    &lt;<span class="hljs-tag">script</span> <span class="hljs-tag">src</span>="../<span class="hljs-tag">dist</span>/<span class="hljs-tag">mermaid</span><span class="hljs-class">.js</span>"&gt;&lt;/<span class="hljs-tag">script</span>&gt;
    &lt;<span class="hljs-tag">script</span>&gt;
        <span class="hljs-tag">var</span> <span class="hljs-tag">config</span> = <span class="hljs-rules">{
            <span class="hljs-rule"><span class="hljs-attribute">startOnLoad</span>:<span class="hljs-value">true,
            flowchart:{
                    useMaxWidth:false,
                    htmlLabels:true
            </span></span></span>}
        };
        <span class="hljs-tag">mermaid</span><span class="hljs-class">.initialize</span>(<span class="hljs-tag">config</span>);
    &lt;/<span class="hljs-tag">script</span>&gt;</code></pre><aside class="success">This is the preferred way of configuring mermaid.</aside>


<h2 id="using-the-mermaid-object">Using the mermaid object</h2>
<p>Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this<br>approach are:</p>
<ul>
<li>mermaid.startOnLoad</li>
<li>mermaid.htmlLabels</li>
</ul>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaid</span><span class="hljs-class">.startOnLoad</span> = <span class="hljs-tag">true</span>;</code></pre><aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>

<h2 id="using-the-mermaid_config">Using the mermaid_config</h2>
<p>Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this<br>approach are:</p>
<ul>
<li>mermaid_config.startOnLoad</li>
<li>mermaid_config.htmlLabels</li>
</ul>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaid_config</span><span class="hljs-class">.startOnLoad</span> = <span class="hljs-tag">true</span>;</code></pre><aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>

<h2 id="using-the-mermaid-init-call">Using the mermaid.init call</h2>
<p>Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this<br>approach are:</p>
<ul>
<li>mermaid_config.startOnLoad</li>
<li>mermaid_config.htmlLabels</li>
</ul>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaid_config</span><span class="hljs-class">.startOnLoad</span> = <span class="hljs-tag">true</span>;</code></pre><aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>

<h1 id="flowcharts-basic-syntax">Flowcharts - Basic Syntax</h1>
<h2 id="graph">Graph</h2>
<p>This statement declares a new graph and the direction of the graph layout.</p>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">code</span>
<span class="hljs-tag">graph</span> <span class="hljs-tag">TD</span></code></pre><p>This declares a graph oriented from top to bottom.</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart1" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 106 186" style="max-width:106px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart1 .node&gt;rect { ; }
#mermaidChart1 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart1 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart1 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M43,58L43,83L43,108" marker-end="url(#arrowhead22)" style="fill:none"></path><defs><marker id="arrowhead22" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="Start" transform="translate(43,39)"><rect rx="0" ry="0" x="-23" y="-19" width="46" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-13,-9)"><foreignobject width="26" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Start</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="Stop" transform="translate(43,127)"><rect rx="0" ry="0" x="-22" y="-19" width="44" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-12,-9)"><foreignobject width="24" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Stop</div></foreignobject></g></g></g></g></g></g></svg></div><pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">code</span>
<span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span></code></pre><p>This declares a graph oriented from left to right.</p>
<p>Possible directions are:</p>
<ul>
<li>TB - top bottom</li>
<li>BT - bottom top</li>
<li>RL - right left</li>
<li><p>LR - left right</p>
</li>
<li><p>TD - same as TB</p>
</li>
</ul>
<div class="mermaid" data-processed="true"><svg id="mermaidChart2" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 200 98" style="max-width:200px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart2 .node&gt;rect { ; }
#mermaidChart2 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart2 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart2 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M66,39L91,39L116,39" marker-end="url(#arrowhead29)" style="fill:none"></path><defs><marker id="arrowhead29" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="Start" transform="translate(43,39)"><rect rx="0" ry="0" x="-23" y="-19" width="46" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-13,-9)"><foreignobject width="26" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Start</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="Stop" transform="translate(138,39)"><rect rx="0" ry="0" x="-22" y="-19" width="44" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-12,-9)"><foreignobject width="24" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Stop</div></foreignobject></g></g></g></g></g></g></svg></div><h2 id="nodes-shapes">Nodes &amp; shapes</h2>
<h3 id="a-node-default-">A node (default)</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">id1</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart3" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 90 98" style="max-width:90px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart3 .node&gt;rect { ; }
#mermaidChart3 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart3 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart3 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g class="node" style="opacity: 1;" id="id" transform="translate(35,39)"><rect rx="0" ry="0" x="-15" y="-19" width="30" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-5,-9)"><foreignobject width="10" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">id</div></foreignobject></g></g></g></g></g></g></svg></div><p>Note that the id is what is displayed in the box.</p>
<h3 id="a-node-with-text">A node with text</h3>
<p>It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text<br>found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The<br>one previously defined will be used when rendering the box.</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">id1</span><span class="hljs-attr_selector">[This is the text in the box]</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart4" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 219 98" style="max-width:219px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart4 .node&gt;rect { ; }
#mermaidChart4 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart4 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart4 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g class="node" style="opacity: 1;" id="id1" transform="translate(99.5,39)"><rect rx="0" ry="0" x="-79.5" y="-19" width="159" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-69.5,-9)"><foreignobject width="139" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">This is the text in the box</div></foreignobject></g></g></g></g></g></g></svg></div><h3 id="a-node-with-round-edges">A node with round edges</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">id1</span>(<span class="hljs-tag">This</span> <span class="hljs-tag">is</span> <span class="hljs-tag">the</span> <span class="hljs-tag">text</span> <span class="hljs-tag">in</span> <span class="hljs-tag">the</span> <span class="hljs-tag">box</span>);</code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart5" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 219 98" style="max-width:219px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart5 .node&gt;rect { ; }
#mermaidChart5 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart5 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart5 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g class="node" style="opacity: 1;" id="id1" transform="translate(99.5,39)"><rect rx="5" ry="5" x="-79.5" y="-19" width="159" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-69.5,-9)"><foreignobject width="139" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">This is the text in the box</div></foreignobject></g></g></g></g></g></g></svg></div><h3 id="a-node-in-the-form-of-a-circle">A node in the form of a circle</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">id1</span>((<span class="hljs-tag">This</span> <span class="hljs-tag">is</span> <span class="hljs-tag">the</span> <span class="hljs-tag">text</span> <span class="hljs-tag">in</span> <span class="hljs-tag">the</span> <span class="hljs-tag">circle</span>));</code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart6" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 230 230" style="max-width:230px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart6 .node&gt;rect { ; }
#mermaidChart6 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart6 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart6 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g class="node" style="opacity: 1;" id="id1" transform="translate(105,105)"><circle x="-85" y="-19" r="85"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-75,-9)"><foreignobject width="150" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">This is the text in the circle</div></foreignobject></g></g></g></g></g></g></svg></div><h3 id="a-node-in-an-asymetric-shape">A node in an asymetric shape</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">id1</span>&gt;<span class="hljs-tag">This</span> <span class="hljs-tag">is</span> <span class="hljs-tag">the</span> <span class="hljs-tag">text</span> <span class="hljs-tag">in</span> <span class="hljs-tag">the</span> <span class="hljs-tag">box</span>]</code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart7" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 238 98" style="max-width:238px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart7 .node&gt;rect { ; }
#mermaidChart7 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart7 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart7 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g class="node" style="opacity: 1;" id="id1" transform="translate(109,39)"><polygon points="-19,0 159,0 159,-38 -19,-38 0,-19" transform="translate(-79.5,19)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-69.5,-9)"><foreignobject width="139" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">This is the text in the box</div></foreignobject></g></g></g></g></g></g></svg></div><p>Currently only the shape above is possible and not its mirror. <em>This might change with future releases.</em></p>
<h3 id="a-node-rhombus-">A node (rhombus)</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">id1</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">This is the text in the box}</span></span></span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart8" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 217.60000610351562 217.60000610351562" style="max-width:217.60000610351562px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart8 .node&gt;rect { ; }
#mermaidChart8 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart8 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart8 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g class="node" style="opacity: 1;" id="id1" transform="translate(98.80000305175781,98.80000305175781)"><polygon points="78.80000000000001,0 157.60000000000002,-78.80000000000001 78.80000000000001,-157.60000000000002 0,-78.80000000000001" rx="5" ry="5" transform="translate(-78.80000000000001,78.80000000000001)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-69.5,-9)"><foreignobject width="139" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">This is the text in the box</div></foreignobject></g></g></g></g></g></g></svg></div><h2 id="links-between-nodes">Links between nodes</h2>
<p>Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.</p>
<h3 id="a-link-with-arrow-head">A link with arrow head</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">A--</span>&gt;<span class="hljs-tag">B</span></code></pre><pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>;
    <span class="hljs-tag">A--</span>&gt;<span class="hljs-tag">B</span></code></pre><h3 id="an-open-link">An open link</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">A</span> <span class="hljs-tag">---</span> <span class="hljs-tag">B</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart9" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 164 98" style="max-width:164px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart9 .node&gt;rect { ; }
#mermaidChart9 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart9 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart9 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M47,39L72,39L97,39" marker-end="url(#arrowhead42)" style="fill:none"></path><defs><marker id="arrowhead42" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 0 0 L 0 0 z" style="fill: #333"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(33.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(110.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">B</div></foreignobject></g></g></g></g></g></g></svg></div><h3 id="text-on-links">Text on links</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">A--</span> <span class="hljs-tag">This</span> <span class="hljs-tag">is</span> <span class="hljs-tag">the</span> <span class="hljs-tag">text</span> <span class="hljs-tag">---</span> <span class="hljs-tag">B</span></code></pre><p>or</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">A---</span>|<span class="hljs-tag">This</span> <span class="hljs-tag">is</span> <span class="hljs-tag">the</span> <span class="hljs-tag">text</span>|<span class="hljs-tag">B</span>;</code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart10" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 270 98" style="max-width:270px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart10 .node&gt;rect { ; }
#mermaidChart10 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart10 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart10 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M47,39L125,39L203,39" marker-end="url(#arrowhead50)" style="fill:none"></path><defs><marker id="arrowhead50" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 0 0 L 0 0 z" style="fill: #333"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform="translate(125,39)"><g transform="translate(-53,-9)" class="label"><foreignobject width="106" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">This is the text</span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(33.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(216.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">B</div></foreignobject></g></g></g></g></g></g></svg></div><h3 id="a-link-with-arrow-head-and-text">A link with arrow head and text</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">A--</span>&gt;|<span class="hljs-tag">text</span>|<span class="hljs-tag">B</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart11" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 190 98" style="max-width:190px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart11 .node&gt;rect { ; }
#mermaidChart11 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart11 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart11 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M47,39L85,39L123,39" marker-end="url(#arrowhead58)" style="fill:none"></path><defs><marker id="arrowhead58" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform="translate(85,39)"><g transform="translate(-13,-9)" class="label"><foreignobject width="26" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">text</span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(33.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(136.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">B</div></foreignobject></g></g></g></g></g></g></svg></div><p>or</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">A--</span> <span class="hljs-tag">text</span> <span class="hljs-tag">--</span>&gt;<span class="hljs-tag">B</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart12" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 190 98" style="max-width:190px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart12 .node&gt;rect { ; }
#mermaidChart12 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart12 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart12 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M47,39L85,39L123,39" marker-end="url(#arrowhead66)" style="fill:none"></path><defs><marker id="arrowhead66" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform="translate(85,39)"><g transform="translate(-13,-9)" class="label"><foreignobject width="26" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">text</span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(33.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(136.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">B</div></foreignobject></g></g></g></g></g></g></svg></div><h3 id="dotted-link">Dotted link</h3>
<p>-.-&gt;</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart13" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 164 98" style="max-width:164px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart13 .node&gt;rect { ; }
#mermaidChart13 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart13 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart13 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M47,39L72,39L97,39" marker-end="url(#arrowhead73)" style="stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;"></path><defs><marker id="arrowhead73" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(33.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(110.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">B</div></foreignobject></g></g></g></g></g></g></svg></div><h3 id="dotted-link-with-text">Dotted link with text</h3>
<p>-. text .-&gt;</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart14" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 190 98" style="max-width:190px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart14 .node&gt;rect { ; }
#mermaidChart14 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart14 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart14 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M47,39L85,39L123,39" marker-end="url(#arrowhead81)" style="stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;"></path><defs><marker id="arrowhead81" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform="translate(85,39)"><g transform="translate(-13,-9)" class="label"><foreignobject width="26" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">text</span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(33.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(136.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">B</div></foreignobject></g></g></g></g></g></g></svg></div><h3 id="thick-link">Thick link</h3>
<p>==&gt;</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart15" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 164 98" style="max-width:164px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart15 .node&gt;rect { ; }
#mermaidChart15 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart15 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart15 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M47,39L72,39L97,39" marker-end="url(#arrowhead88)" style="stroke: #333; stroke-width: 3.5px;fill:none"></path><defs><marker id="arrowhead88" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(33.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(110.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">B</div></foreignobject></g></g></g></g></g></g></svg></div><h3 id="thick-link-with-text">Thick link with text</h3>
<p>== text ==&gt;</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart16" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 190 98" style="max-width:190px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart16 .node&gt;rect { ; }
#mermaidChart16 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart16 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart16 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M47,39L85,39L123,39" marker-end="url(#arrowhead96)" style="stroke: #333; stroke-width: 3.5px;fill:none"></path><defs><marker id="arrowhead96" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform="translate(85,39)"><g transform="translate(-13,-9)" class="label"><foreignobject width="26" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">text</span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(33.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(136.5,39)"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">B</div></foreignobject></g></g></g></g></g></g></svg></div><h2 id="special-characters-that-break-syntax">Special characters that break syntax</h2>
<p>It is possible to put text within quotes in order to render more troublesome characters. As in the example below:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">d1</span><span class="hljs-attr_selector">["This is the (text) in the box"]</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart17" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 228 98" style="max-width:228px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart17 .node&gt;rect { ; }
#mermaidChart17 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart17 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart17 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"><g class="node" style="opacity: 1;" id="id1" transform="translate(104,39)"><rect rx="0" ry="0" x="-84" y="-19" width="168" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-74,-9)"><foreignobject width="148" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">This is the (text) in the box</div></foreignobject></g></g></g></g></g></g></svg></div><h3 id="entity-codes-to-escape-characters">Entity codes to escape characters</h3>
<p>It is possible to escape characters using the syntax examplified here.</p>
<p>The flowchart defined by the following code:</p>
<pre class="css"><code class="hljs">    <span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
        <span class="hljs-tag">A</span><span class="hljs-attr_selector">["A double quote:#quot;"]</span> <span class="hljs-tag">--</span>&gt;<span class="hljs-tag">B</span><span class="hljs-attr_selector">["A dec char:#9829;"]</span></code></pre><p>This would render to the diagram below:</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart18" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 406 98" style="max-width:406px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart18 .node&gt;rect { ; }
#mermaidChart18 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart18 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart18 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M177,39L202,39L227,39" marker-end="url(#arrowhead104)" style="fill:none"></path><defs><marker id="arrowhead104" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(98.5,39)"><rect rx="0" ry="0" x="-78.5" y="-19" width="157" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-68.5,-9)"><foreignobject width="137" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A double quote:"</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(296.5,39)"><rect rx="0" ry="0" x="-69.5" y="-19" width="139" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-59.5,-9)"><foreignobject width="119" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A dec char:♥</div></foreignobject></g></g></g></g></g></g></svg></div><h2 id="subgraphs">Subgraphs</h2>
<pre class="css"><code class="hljs"><span class="hljs-tag">subgraph</span> <span class="hljs-tag">title</span>
    <span class="hljs-tag">graph</span> <span class="hljs-tag">definition</span>
<span class="hljs-tag">end</span></code></pre><p>An example below:</p>
<pre class="css"><code class="hljs"> %% <span class="hljs-tag">Subgraph</span> <span class="hljs-tag">example</span>
 <span class="hljs-tag">graph</span> <span class="hljs-tag">TB</span>
         <span class="hljs-tag">subgraph</span> <span class="hljs-tag">one</span>
         <span class="hljs-tag">a1--</span>&gt;<span class="hljs-tag">a2</span>
         <span class="hljs-tag">end</span>
         <span class="hljs-tag">subgraph</span> <span class="hljs-tag">two</span>
         <span class="hljs-tag">b1--</span>&gt;<span class="hljs-tag">b2</span>
         <span class="hljs-tag">end</span>
         <span class="hljs-tag">subgraph</span> <span class="hljs-tag">three</span>
         <span class="hljs-tag">c1--</span>&gt;<span class="hljs-tag">c2</span>
         <span class="hljs-tag">end</span>
         <span class="hljs-tag">c1--</span>&gt;<span class="hljs-tag">a2</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart19" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 418 236" style="max-width:418px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart19 .node&gt;rect { ; }
#mermaidChart19 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart19 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart19 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
.cluster rect { fill: rgb(205, 255, 178) !important; rx: 4 !important; stroke: rgb(110, 170, 73) !important; stroke-width: 1px !important;}
.cluster text { fill: rgb(51, 51, 51);}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g><g class="output"><g class="clusters"><g class="cluster" id="subGraph2" style="opacity: 1;" transform="translate(76,108)"><rect width="112" height="176" x="-56" y="-88"></rect><g class="label"><g transform="translate(0,0)"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"></div></foreignobject></g></g><text x="0" y="-74" fill="black" stroke="none" id="mermaidChart19Text" style="text-anchor: middle;"> three</text></g><g class="cluster" id="subGraph1" style="opacity: 1;" transform="translate(203.5,108)"><rect width="103" height="176" x="-51.5" y="-88"></rect><g class="label"><g transform="translate(0,0)"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"></div></foreignobject></g></g><text x="0" y="-74" fill="black" stroke="none" id="mermaidChart19Text" style="text-anchor: middle;"> two</text></g><g class="cluster" id="subGraph0" style="opacity: 1;" transform="translate(326.5,108)"><rect width="103" height="176" x="-51.5" y="-88"></rect><g class="label"><g transform="translate(0,0)"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"></div></foreignobject></g></g><text x="0" y="-74" fill="black" stroke="none" id="mermaidChart19Text" style="text-anchor: middle;"> one</text></g></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M87.69318181818181,83L96.5,108L310,148.84347826086957" marker-end="url(#arrowhead154)" style="fill:none"></path><defs><marker id="arrowhead154" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M326.5,83L326.5,108L326.5,133" marker-end="url(#arrowhead155)" style="fill:none"></path><defs><marker id="arrowhead155" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M203.5,83L203.5,108L203.5,133" marker-end="url(#arrowhead156)" style="fill:none"></path><defs><marker id="arrowhead156" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M76.68181818181819,83L71,108L71,133" marker-end="url(#arrowhead157)" style="fill:none"></path><defs><marker id="arrowhead157" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="c1" transform="translate(81,64)"><rect rx="0" ry="0" x="-16" y="-19" width="32" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-6,-9)"><foreignobject width="12" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">c1</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="c2" transform="translate(71,152)"><rect rx="0" ry="0" x="-16" y="-19" width="32" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-6,-9)"><foreignobject width="12" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">c2</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="b1" transform="translate(203.5,64)"><rect rx="0" ry="0" x="-16.5" y="-19" width="33" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-6.5,-9)"><foreignobject width="13" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">b1</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="b2" transform="translate(203.5,152)"><rect rx="0" ry="0" x="-16.5" y="-19" width="33" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-6.5,-9)"><foreignobject width="13" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">b2</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="a1" transform="translate(326.5,64)"><rect rx="0" ry="0" x="-16.5" y="-19" width="33" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-6.5,-9)"><foreignobject width="13" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">a1</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="a2" transform="translate(326.5,152)"><rect rx="0" ry="0" x="-16.5" y="-19" width="33" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-6.5,-9)"><foreignobject width="13" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">a2</div></foreignobject></g></g></g></g></g></g></svg></div><h2 id="interaction">Interaction</h2>
<p>It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">click</span> <span class="hljs-tag">nodeId</span> <span class="hljs-tag">callback</span></code></pre><ul>
<li>nodeId is the id of the node</li>
<li>callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.</li>
</ul>
<p>Examples of tooltip usage below:</p>
<pre class="css"><code class="hljs">&lt;<span class="hljs-tag">script</span>&gt;
    <span class="hljs-tag">var</span> <span class="hljs-tag">callback</span> = <span class="hljs-tag">function</span>()<span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">alert('A callback was triggered');
    }
&lt;script&gt;</span></span></span></code></pre><pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>;
    <span class="hljs-tag">A--</span>&gt;<span class="hljs-tag">B</span>;
    <span class="hljs-tag">click</span> <span class="hljs-tag">A</span> <span class="hljs-tag">callback</span> "<span class="hljs-tag">Tooltip</span> <span class="hljs-tag">for</span> <span class="hljs-tag">a</span> <span class="hljs-tag">callback</span>"
    <span class="hljs-tag">click</span> <span class="hljs-tag">B</span> "<span class="hljs-tag">http</span>://<span class="hljs-tag">www</span><span class="hljs-class">.github</span><span class="hljs-class">.com</span>" "<span class="hljs-tag">This</span> <span class="hljs-tag">is</span> <span class="hljs-tag">a</span> <span class="hljs-tag">tooltip</span> <span class="hljs-tag">for</span> <span class="hljs-tag">a</span> <span class="hljs-tag">link</span>"</code></pre><p>The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart20" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 164 98" style="max-width:164px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart20 .node&gt;rect { ; }
#mermaidChart20 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart20 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart20 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M47,39L72,39L97,39" marker-end="url(#arrowhead164)" style="fill:none"></path><defs><marker id="arrowhead164" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(33.5,39)" title="Tooltip"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(110.5,39)" title="This is a link"><rect rx="0" ry="0" x="-13.5" y="-19" width="27" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-3.5,-9)"><foreignobject width="7" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">B</div></foreignobject></g></g></g></g></g></g></svg></div><aside class="success">The tooltip functionality and the ability to link to urls are available from version 0.5.2.</aside>

<p>When integration mermaid using the mermaidAPI #mermaidapi the function that binds the events need to be run when the finished graph has been added to the page. This is described in the <a href="http://knsv.github.io/mermaid/#api-usage">API usage</a> section.</p>
<h2 id="styling-and-classes">Styling and classes</h2>
<h3 id="styling-links">Styling links</h3>
<p>It is possible to style links. For instance you might want to style a link that is going backwards in the flow. As links<br>have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.<br>Instead of ids, the order number of when the link was defined in the graph is used. In the example below the style<br>defined in the linkStyle statement will belong to the fourth link in the graph:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">linkStyle</span> 3 <span class="hljs-tag">stroke</span>:<span class="hljs-id">#ff3</span>,<span class="hljs-tag">stroke-width</span><span class="hljs-pseudo">:4px</span>;</code></pre><h3 id="styling-a-node">Styling a node</h3>
<p>It is possible to apply specific styles such as a thicker border or a different background color to a node.</p>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">code</span>
<span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">id1</span>(<span class="hljs-tag">Start</span>)<span class="hljs-tag">--</span>&gt;<span class="hljs-tag">id2</span>(<span class="hljs-tag">Stop</span>)
    <span class="hljs-tag">style</span> <span class="hljs-tag">id1</span> <span class="hljs-tag">fill</span>:<span class="hljs-id">#f9f</span>,<span class="hljs-tag">stroke</span>:<span class="hljs-id">#333</span>,<span class="hljs-tag">stroke-width</span><span class="hljs-pseudo">:4px</span>;
    <span class="hljs-tag">style</span> <span class="hljs-tag">id2</span> <span class="hljs-tag">fill</span>:<span class="hljs-id">#ccf</span>,<span class="hljs-tag">stroke</span>:<span class="hljs-id">#f66</span>,<span class="hljs-tag">stroke-width</span><span class="hljs-pseudo">:2px</span>,<span class="hljs-tag">stroke-dasharray</span>: 5, 5;</code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart21" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 200 98" style="max-width:200px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart21 .node&gt;rect { ; }
#mermaidChart21 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart21 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart21 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M66,39L91,39L116,39" marker-end="url(#arrowhead171)" style="fill:none"></path><defs><marker id="arrowhead171" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="id1" transform="translate(43,39)"><rect rx="5" ry="5" x="-23" y="-19" width="46" height="38" style="fill:#f9f;stroke:#333;stroke-width:4px;"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-13,-9)"><foreignobject width="26" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Start</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="id2" transform="translate(138,39)"><rect rx="5" ry="5" x="-22" y="-19" width="44" height="38" style="fill:#ccf;stroke:#f66;stroke-width:2px;stroke-dasharray: 5; 5;"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-12,-9)"><foreignobject width="24" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Stop</div></foreignobject></g></g></g></g></g></g></svg></div><h4 id="classes">Classes</h4>
<p>More convenient then defining the style every time is to define a class of styles and attach this class to the nodes that<br>should have a different look.</p>
<p>a class definition looks like the example below:</p>
<pre class="css"><code class="hljs">    <span class="hljs-tag">classDef</span> <span class="hljs-tag">className</span> <span class="hljs-tag">fill</span>:<span class="hljs-id">#f9f</span>,<span class="hljs-tag">stroke</span>:<span class="hljs-id">#333</span>,<span class="hljs-tag">stroke-width</span><span class="hljs-pseudo">:4px</span>;</code></pre><p>Attachment of a class to a node is done as per below:</p>
<pre class="css"><code class="hljs">    <span class="hljs-tag">class</span> <span class="hljs-tag">nodeId1</span> <span class="hljs-tag">className</span>;</code></pre><p>It is also possible to attach a class to a list of nodes in one statement:</p>
<pre class="css"><code class="hljs">    <span class="hljs-tag">class</span> <span class="hljs-tag">nodeId1</span>,<span class="hljs-tag">nodeId2</span> <span class="hljs-tag">className</span>;</code></pre><h3 id="css-classes">Css classes</h3>
<p>It is also possible to pre dine classes in css styles that can be applied from the graph definition as in the example<br>below:<br><strong>Example style</strong></p>
<pre class="css"><code class="hljs"><style>
    <span class="hljs-class">.cssClass</span> &gt; <span class="hljs-tag">rect</span><span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value"><span class="hljs-hexcolor">#FF0000</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value"><span class="hljs-hexcolor">#FFFF00</span></span></span>;
        <span class="hljs-rule"><span class="hljs-attribute">stroke-width</span>:<span class="hljs-value"><span class="hljs-number">4px</span></span></span>;
    <span class="hljs-rule">}</span></span>
</style></code></pre><p><strong>Example definition</strong></p>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>;
    <span class="hljs-tag">A--</span>&gt;<span class="hljs-tag">B</span><span class="hljs-attr_selector">[AAA</span><span><span class="hljs-attr_selector">BBB</span></span><span class="hljs-attr_selector">]</span>;
    <span class="hljs-tag">B--</span>&gt;<span class="hljs-tag">D</span>;
    <span class="hljs-tag">class</span> <span class="hljs-tag">A</span> <span class="hljs-tag">cssClass</span>;</code></pre><aside class="warning">Class definitions in the graph defnition is broken in version 0.5.1 but has been fixed in the master branch of mermaid. This fix will be included in 0.5.2</aside>



<h3 id="default-class">Default class</h3>
<p>If a class is named default it will be assigned to all classes without specific class definitions.</p>
<pre class="css"><code class="hljs">    <span class="hljs-tag">classDef</span> <span class="hljs-tag">default</span> <span class="hljs-tag">fill</span>:<span class="hljs-id">#f9f</span>,<span class="hljs-tag">stroke</span>:<span class="hljs-id">#333</span>,<span class="hljs-tag">stroke-width</span><span class="hljs-pseudo">:4px</span>;</code></pre><h2 id="basic-support-for-fontawesome">Basic support for fontawesome</h2>
<p>It is possible to add icons from fontawesome. In order to do so, you need to add the fontwesome as described in the instructions at<br><a href="https://fortawesome.github.io/Font-Awesome/">the fontawesome web site</a>.</p>
<p>The icons are acessed via the syntax fa:#icon class name#.</p>
<p>The example code below</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">graph</span> <span class="hljs-tag">TD</span>
    <span class="hljs-tag">B</span><span class="hljs-attr_selector">["fa:fa-twitter for peace"]</span>
    <span class="hljs-tag">B--</span>&gt;<span class="hljs-tag">C</span><span class="hljs-attr_selector">[fa:fa-ban forbidden]</span>
    <span class="hljs-tag">B--</span>&gt;<span class="hljs-tag">D</span>(<span class="hljs-tag">fa</span><span class="hljs-pseudo">:fa-spinner)</span>;
    <span class="hljs-tag">B--</span>&gt;<span class="hljs-tag">E</span>(<span class="hljs-tag">A</span> <span class="hljs-tag">fa</span><span class="hljs-pseudo">:fa-camera-retro</span> <span class="hljs-tag">perhaps</span>?);</code></pre><p>Would render the graph below:</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart22" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 374 186" style="max-width:374px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart22 .node&gt;rect { ; }
#mermaidChart22 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart22 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart22 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.fa { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; line-height: 1; font-family: FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased;}
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M132.5,56.24324324324324L65,83L65,108" marker-end="url(#arrowhead180)" style="fill:none"></path><defs><marker id="arrowhead180" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M176,58L176,83L176,108" marker-end="url(#arrowhead181)" style="fill:none"></path><defs><marker id="arrowhead181" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M219.5,56.089285714285715L288,83L288,108" marker-end="url(#arrowhead182)" style="fill:none"></path><defs><marker id="arrowhead182" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="B" transform="translate(176,39)"><rect rx="0" ry="0" x="-43.5" y="-19" width="87" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-33.5,-9)"><foreignobject width="67" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><i class="fa fa-twitter"></i> for peace</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="C" transform="translate(65,127)"><rect rx="0" ry="0" x="-45" y="-19" width="90" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-35,-9)"><foreignobject width="70" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><i class="fa fa-ban"></i> forbidden</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="D" transform="translate(176,127)"><rect rx="5" ry="5" x="-16" y="-19" width="32" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-6,-9)"><foreignobject width="12" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><i class="fa fa-spinner"></i></div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="E" transform="translate(288,127)"><rect rx="5" ry="5" x="-46" y="-19" width="92" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-36,-9)"><foreignobject width="72" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">A <i class="fa fa-camera-retro"></i> perhaps?</div></foreignobject></g></g></g></g></g></g></svg></div><aside class="success">Support for fontawesome has been comitted to the  master branch and will be included in 0.5.3</aside>

<h2 id="graph-declarations-with-spaces-between-vertices-and-link-and-without-semicolon">Graph declarations with spaces between vertices and link and without semicolon</h2>
<ul>
<li><p>In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.</p>
</li>
<li><p>A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduce to improve readability.</p>
</li>
</ul>
<p>Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.</p>
<pre class="css"><code class="hljs">    <span class="hljs-tag">A</span><span class="hljs-attr_selector">[Hard edge]</span> <span class="hljs-tag">--</span>&gt;|<span class="hljs-tag">Link</span> <span class="hljs-tag">text</span>| <span class="hljs-tag">B</span>(<span class="hljs-tag">Round</span> <span class="hljs-tag">edge</span>)
    <span class="hljs-tag">B</span> <span class="hljs-tag">--</span>&gt; <span class="hljs-tag">C</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">Decision}
    C --&gt;|One| D[Result one]
    C --&gt;|Two| E[Result two]</span></span></span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart23" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 605.4000015258789 186" style="max-width:605.4000015258789px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart23 .node&gt;rect { ; }
#mermaidChart23 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart23 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart23 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M95,83L149.5,83L204,83" marker-end="url(#arrowhead203)" style="fill:none"></path><defs><marker id="arrowhead203" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M286,83L311,83L336.5000007629394,83.5" marker-end="url(#arrowhead204)" style="fill:none"></path><defs><marker id="arrowhead204" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M403.8184700766358,68.41846931369629L453.4000015258789,39L488.9000015258789,39" marker-end="url(#arrowhead205)" style="fill:none"></path><defs><marker id="arrowhead205" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M403.81846910931483,98.5815301277457L453.4000015258789,127L488.4000015258789,127" marker-end="url(#arrowhead206)" style="fill:none"></path><defs><marker id="arrowhead206" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform="translate(149.5,83)"><g transform="translate(-29.5,-9)" class="label"><foreignobject width="59" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Link text</span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform="translate(453.4000015258789,39)"><g transform="translate(-10,-9)" class="label"><foreignobject width="20" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">One</span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform="translate(453.4000015258789,127)"><g transform="translate(-10,-9)" class="label"><foreignobject width="20" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Two</span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(57.5,83)"><rect rx="0" ry="0" x="-37.5" y="-19" width="75" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-27.5,-9)"><foreignobject width="55" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Hard edge</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(245,83)"><rect rx="5" ry="5" x="-41" y="-19" width="82" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-31,-9)"><foreignobject width="62" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Round edge</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="C" transform="translate(377.20000076293945,83)"><polygon points="41.2,0 82.4,-41.2 41.2,-82.4 0,-41.2" rx="5" ry="5" transform="translate(-41.2,41.2)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-22.5,-9)"><foreignobject width="45" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Decision</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="D" transform="translate(526.9000015258789,39)"><rect rx="0" ry="0" x="-38" y="-19" width="76" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-28,-9)"><foreignobject width="56" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Result one</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="E" transform="translate(526.9000015258789,127)"><rect rx="0" ry="0" x="-38.5" y="-19" width="77" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-28.5,-9)"><foreignobject width="57" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Result two</div></foreignobject></g></g></g></g></g></g></svg></div>
<h1 id="sequence-diagrams">Sequence diagrams</h1>
<blockquote>
<p>A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.</p>
</blockquote>
<p>Mermaid can render sequence diagrams. The code snippet below:</p>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">of</span> <span class="hljs-tag">sequence</span> <span class="hljs-tag">diagram</span>
<span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">Alice-</span>&gt;&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">John</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">John--</span>&gt;&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Great</span>!</code></pre><p>Renders the following diagram:</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart24" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:450px;" viewBox="-50 -10 450 231"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
.messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
.messageLine1 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.messageText { fill: rgb(51, 51, 51); stroke: none;}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor0" x1="75" y1="5" x2="75" y2="220" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><line id="actor1" x1="275" y1="5" x2="275" y2="220" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="275" y="37.5" class="actor" style="text-anchor: middle;">John</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="93" class="messageText" style="text-anchor: middle;">Hello John, how are you?</text><line x1="75" y1="100" x2="275" y2="100" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="175" y="128" class="messageText" style="text-anchor: middle;">Great!</text><line x1="275" y1="135" x2="75" y2="135" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><rect x="0" y="155" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="155" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="192.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><rect x="200" y="155" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="155" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="275" y="192.5" class="actor" style="text-anchor: middle;">John</text></switch></g></svg></div><h2 id="syntax">Syntax</h2>
<h3 id="participants">Participants</h3>
<p>The participants can be defined implicitly as in the first example on this page. The participants or actors are<br>rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a<br>different order than how they appear in the first message. It is possible to specify the actor's order of<br>appearance by doing the following:</p>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">of</span> <span class="hljs-tag">sequence</span> <span class="hljs-tag">diagram</span>
<span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">participant</span> <span class="hljs-tag">John</span>
    <span class="hljs-tag">participant</span> <span class="hljs-tag">Alice</span>
    <span class="hljs-tag">Alice-</span>&gt;&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">John</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">John--</span>&gt;&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Great</span>!</code></pre><p>Renders to the diagram below:</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart25" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:450px;" viewBox="-50 -10 450 231"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
.messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
.messageLine1 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.messageText { fill: rgb(51, 51, 51); stroke: none;}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor2" x1="75" y1="5" x2="75" y2="220" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">John</text></switch></g><g><line id="actor3" x1="275" y1="5" x2="275" y2="220" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="275" y="37.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="93" class="messageText" style="text-anchor: middle;">Hello John, how are you?</text><line x1="275" y1="100" x2="75" y2="100" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="175" y="128" class="messageText" style="text-anchor: middle;">Great!</text><line x1="75" y1="135" x2="275" y2="135" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><rect x="0" y="155" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="155" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="75" y="192.5" class="actor" style="text-anchor: middle;">John</text></switch></g><g><rect x="200" y="155" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="155" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="275" y="192.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g></svg></div><h2 id="messages">Messages</h2>
<p>Messages can be of two displayed either solid or with a dotted line.</p>
<pre class="css"><code class="hljs"><span class="hljs-attr_selector">[Actor]</span><span class="hljs-attr_selector">[Arrow]</span><span class="hljs-attr_selector">[Actor]</span><span class="hljs-pseudo">:Message</span> <span class="hljs-tag">text</span></code></pre><p>There are six types of arrows currently supported:</p>
<p>-&gt; which will render a solid line without arrow</p>
<p>--&gt; which will render a dotted line  without arrow</p>
<p>-&gt;&gt; which will render a solid line with arrowhead</p>
<p>--&gt;&gt; which will render a dotted line  with arrowhead</p>
<p>-x which will render a solid line with a cross at the end (async)</p>
<p>--x which will render a dotted line with a cross at the end (async)</p>
<h2 id="activations">Activations</h2>
<p>It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">Alice-</span>&gt;&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">John</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">activate</span> <span class="hljs-tag">John</span>
    <span class="hljs-tag">John--</span>&gt;&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Great</span>!
    <span class="hljs-tag">deactivate</span> <span class="hljs-tag">John</span></code></pre><p>Renders to the diagram below:</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart26" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:450px;" viewBox="-50 -10 450 231"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
.messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
.messageLine1 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.messageText { fill: rgb(51, 51, 51); stroke: none;}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor4" x1="75" y1="5" x2="75" y2="220" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><line id="actor5" x1="275" y1="5" x2="275" y2="220" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="275" y="37.5" class="actor" style="text-anchor: middle;">John</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="93" class="messageText" style="text-anchor: middle;">Hello John, how are you?</text><line x1="75" y1="100" x2="275" y2="100" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><rect x="270" y="102" fill="#f4f4f4" stroke="#666" width="10" height="33" rx="0" ry="0"></rect></g><g><text x="172.5" y="128" class="messageText" style="text-anchor: middle;">Great!</text><line x1="270" y1="135" x2="75" y2="135" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><rect x="0" y="155" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="155" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="192.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><rect x="200" y="155" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="155" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="275" y="192.5" class="actor" style="text-anchor: middle;">John</text></switch></g></svg></div><p>There is also a shortcut notation by appending <code>+</code>/<code>-</code> suffix to the message arrow:  </p>
<pre class="css"><code class="hljs"><span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">Alice-</span>&gt;&gt;+<span class="hljs-tag">John</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">John</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">John--</span>&gt;&gt;<span class="hljs-tag">-Alice</span>: <span class="hljs-tag">Great</span>!</code></pre><p>Activations can be stacked for same actor:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">Alice-</span>&gt;&gt;+<span class="hljs-tag">John</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">John</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">Alice-</span>&gt;&gt;+<span class="hljs-tag">John</span>: <span class="hljs-tag">John</span>, <span class="hljs-tag">can</span> <span class="hljs-tag">yoy</span> <span class="hljs-tag">hear</span> <span class="hljs-tag">me</span>?
    <span class="hljs-tag">John--</span>&gt;&gt;<span class="hljs-tag">-Alice</span>: <span class="hljs-tag">Hi</span> <span class="hljs-tag">Alice</span>, <span class="hljs-tag">I</span> <span class="hljs-tag">can</span> <span class="hljs-tag">hear</span> <span class="hljs-tag">you</span>!
    <span class="hljs-tag">John--</span>&gt;&gt;<span class="hljs-tag">-Alice</span>: <span class="hljs-tag">I</span> <span class="hljs-tag">feel</span> <span class="hljs-tag">great</span>!</code></pre><p>Stacked activations look like this:</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart27" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:450px;" viewBox="-50 -10 450 301"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
.messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
.messageLine1 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.messageText { fill: rgb(51, 51, 51); stroke: none;}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor6" x1="75" y1="5" x2="75" y2="290" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><line id="actor7" x1="275" y1="5" x2="275" y2="290" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="275" y="37.5" class="actor" style="text-anchor: middle;">John</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="93" class="messageText" style="text-anchor: middle;">Hello John, how are you?</text><line x1="75" y1="100" x2="275" y2="100" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><rect x="270" y="102" fill="#f4f4f4" stroke="#666" width="10" height="103" rx="0" ry="0"></rect></g><g><text x="172.5" y="128" class="messageText" style="text-anchor: middle;">John, can yoy hear me?</text><line x1="75" y1="135" x2="270" y2="135" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><rect x="275" y="137" fill="#f4f4f4" stroke="#666" width="10" height="33" rx="0" ry="0"></rect></g><g><text x="172.5" y="163" class="messageText" style="text-anchor: middle;">Hi Alice, I can hear you!</text><line x1="270" y1="170" x2="75" y2="170" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><text x="172.5" y="198" class="messageText" style="text-anchor: middle;">I feel great!</text><line x1="270" y1="205" x2="75" y2="205" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><rect x="0" y="225" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="225" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="262.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><rect x="200" y="225" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="225" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="275" y="262.5" class="actor" style="text-anchor: middle;">John</text></switch></g></svg></div><h2 id="notes">Notes</h2>
<p>It is possible to add notes to a sequence diagram. This is done by the notation<br>Note [ right of | left of | over ] [Actor]: Text in note content</p>
<p>See the example below:</p>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">of</span> <span class="hljs-tag">sequence</span> <span class="hljs-tag">diagram</span>
<span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">participant</span> <span class="hljs-tag">John</span>
    <span class="hljs-tag">Note</span> <span class="hljs-tag">right</span> <span class="hljs-tag">of</span> <span class="hljs-tag">John</span>: <span class="hljs-tag">Text</span> <span class="hljs-tag">in</span> <span class="hljs-tag">note</span></code></pre><p>Renders to the diagram below:</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart28" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:350px;" viewBox="-50 -10 350 207"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.note { stroke: rgb(110, 170, 73); fill: rgb(255, 245, 173);}
.noteText { fill: black; stroke: none; font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor8" x1="75" y1="5" x2="75" y2="196" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">John</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><rect x="100" y="75" fill="#EDF2AE" stroke="#666" width="150" height="36" rx="0" ry="0" class="note"></rect><text x="116" y="103" fill="black" class="noteText"><tspan x="116">Text in note</tspan></text></g><g><rect x="0" y="131" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="131" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="75" y="168.5" class="actor" style="text-anchor: middle;">John</text></switch></g></svg></div><p>It is also possible to create notes spanning two participants:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">Alice-</span>&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">John</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">Note</span> <span class="hljs-tag">over</span> <span class="hljs-tag">Alice</span>,<span class="hljs-tag">John</span>: <span class="hljs-tag">A</span> <span class="hljs-tag">typical</span> <span class="hljs-tag">interaction</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart29" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:450px;" viewBox="-50 -10 450 242"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
.messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.messageText { fill: rgb(51, 51, 51); stroke: none;}
.note { stroke: rgb(110, 170, 73); fill: rgb(255, 245, 173);}
.noteText { fill: black; stroke: none; font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor9" x1="75" y1="5" x2="75" y2="231" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><line id="actor10" x1="275" y1="5" x2="275" y2="231" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="275" y="37.5" class="actor" style="text-anchor: middle;">John</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="93" class="messageText" style="text-anchor: middle;">Hello John, how are you?</text><line x1="75" y1="100" x2="275" y2="100" class="messageLine0" stroke-width="2" stroke="black" style="fill: none;"></line></g><g><rect x="50" y="110" fill="#EDF2AE" stroke="#666" width="250" height="36" rx="0" ry="0" class="note"></rect><text x="66" y="138" fill="black" class="noteText"><tspan x="66">A typical interaction</tspan></text></g><g><rect x="0" y="166" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="166" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="203.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><rect x="200" y="166" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="166" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="275" y="203.5" class="actor" style="text-anchor: middle;">John</text></switch></g></svg></div><h2 id="loops">Loops</h2>
<p>It is possible to express loops in a sequence diagram. This is done by the notation</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">loop</span> <span class="hljs-tag">Loop</span> <span class="hljs-tag">text</span>
... <span class="hljs-tag">statements</span> ...
<span class="hljs-tag">end</span></code></pre><p>See the example below</p>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">of</span> <span class="hljs-tag">sequence</span> <span class="hljs-tag">diagram</span>
<span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">Alice-</span>&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">John</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">loop</span> <span class="hljs-tag">Reply</span> <span class="hljs-tag">every</span> <span class="hljs-tag">minute</span>
        <span class="hljs-tag">John--</span>&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Great</span>!
    <span class="hljs-tag">end</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart30" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:450px;" viewBox="-50 -10 450 266"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
.messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
.messageLine1 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.messageText { fill: rgb(51, 51, 51); stroke: none;}
.labelBox { stroke: rgb(50, 105, 50); fill: rgb(205, 228, 152);}
.labelText { fill: black; stroke: none;}
.loopText { fill: black; stroke: none;}
.loopLine { stroke-width: 2; stroke: rgb(50, 105, 50);}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor11" x1="75" y1="5" x2="75" y2="255" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><line id="actor12" x1="275" y1="5" x2="275" y2="255" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="275" y="37.5" class="actor" style="text-anchor: middle;">John</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="93" class="messageText" style="text-anchor: middle;">Hello John, how are you?</text><line x1="75" y1="100" x2="275" y2="100" class="messageLine0" stroke-width="2" stroke="black" style="fill: none;"></line></g><g><text x="175" y="153" class="messageText" style="text-anchor: middle;">Great!</text><line x1="275" y1="160" x2="75" y2="160" class="messageLine1" stroke-width="2" stroke="black" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><line x1="65" y1="110" x2="285" y2="110" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="285" y1="110" x2="285" y2="170" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="170" x2="285" y2="170" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="110" x2="65" y2="170" stroke-width="2" stroke="#526e52" class="loopLine"></line><rect x="65" y="110" fill="#526e52" stroke="none" width="50" height="20" rx="0" ry="0" class="labelBox"></rect><text x="72.5" y="125" fill="white" class="labelText"><tspan x="72.5">loop</tspan></text><text x="175" y="125" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175">[ Every minute ]</tspan></text></g><g><rect x="0" y="190" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="190" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="227.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><rect x="200" y="190" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="190" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="275" y="227.5" class="actor" style="text-anchor: middle;">John</text></switch></g></svg></div><h2 id="alt">Alt</h2>
<p>It is possible to express alternative paths in a sequence diagram. This is done by the notation</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">alt</span> <span class="hljs-tag">Describing</span> <span class="hljs-tag">text</span>
... <span class="hljs-tag">statements</span> ...
<span class="hljs-tag">else</span>
... <span class="hljs-tag">statements</span> ...
<span class="hljs-tag">end</span></code></pre><p>or if there is sequence that is optional (if without else).</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">opt</span> <span class="hljs-tag">Describing</span> <span class="hljs-tag">text</span>
... <span class="hljs-tag">statements</span> ...
<span class="hljs-tag">end</span></code></pre><p>See the example below</p>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">of</span> <span class="hljs-tag">sequence</span> <span class="hljs-tag">diagram</span>
    <span class="hljs-tag">sequenceDiagram</span>
        <span class="hljs-tag">Alice-</span>&gt;&gt;<span class="hljs-tag">Bob</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">Bob</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
        <span class="hljs-tag">alt</span> <span class="hljs-tag">is</span> <span class="hljs-tag">sick</span>
            <span class="hljs-tag">Bob-</span>&gt;&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Not</span> <span class="hljs-tag">so</span> <span class="hljs-tag">good</span> <span class="hljs-pseudo">:(</span>
        <span class="hljs-tag">else</span> <span class="hljs-tag">is</span> <span class="hljs-tag">well</span>
            <span class="hljs-tag">Bob-</span>&gt;&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Feeling</span> <span class="hljs-tag">fresh</span> <span class="hljs-tag">like</span> <span class="hljs-tag">a</span> <span class="hljs-tag">daisy</span>
        <span class="hljs-tag">end</span>
        <span class="hljs-tag">opt</span> <span class="hljs-tag">Extra</span> <span class="hljs-tag">response</span>
            <span class="hljs-tag">Bob-</span>&gt;&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Thanks</span> <span class="hljs-tag">for</span> <span class="hljs-tag">asking</span>
        <span class="hljs-tag">end</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart31" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:450px;" viewBox="-50 -10 450 391"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
.messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.messageText { fill: rgb(51, 51, 51); stroke: none;}
.labelBox { stroke: rgb(50, 105, 50); fill: rgb(205, 228, 152);}
.labelText { fill: black; stroke: none;}
.loopText { fill: black; stroke: none;}
.loopLine { stroke-width: 2; stroke: rgb(50, 105, 50);}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor13" x1="75" y1="5" x2="75" y2="380" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><line id="actor14" x1="275" y1="5" x2="275" y2="380" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Bob</div></div></foreignobject><text x="275" y="37.5" class="actor" style="text-anchor: middle;">Bob</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="93" class="messageText" style="text-anchor: middle;">Hello Bob, how are you?</text><line x1="75" y1="100" x2="275" y2="100" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="175" y="153" class="messageText" style="text-anchor: middle;">Not so good :(</text><line x1="275" y1="160" x2="75" y2="160" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="175" y="208" class="messageText" style="text-anchor: middle;">Feeling fresh like a daisy</text><line x1="275" y1="215" x2="75" y2="215" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><line x1="65" y1="110" x2="285" y2="110" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="285" y1="110" x2="285" y2="225" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="225" x2="285" y2="225" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="110" x2="65" y2="225" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="170" x2="285" y2="170" stroke-width="2" stroke="#526e52" class="loopLine"></line><rect x="65" y="110" fill="#526e52" stroke="none" width="50" height="20" rx="0" ry="0" class="labelBox"></rect><text x="72.5" y="125" fill="white" class="labelText"><tspan x="72.5">alt</tspan></text><text x="175" y="125" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175">[ is sick ]</tspan></text><text x="175" y="185" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175">[ is well ]</tspan></text></g><g><text x="175" y="278" class="messageText" style="text-anchor: middle;">Thanks for asking</text><line x1="275" y1="285" x2="75" y2="285" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><line x1="65" y1="235" x2="285" y2="235" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="285" y1="235" x2="285" y2="295" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="295" x2="285" y2="295" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="235" x2="65" y2="295" stroke-width="2" stroke="#526e52" class="loopLine"></line><rect x="65" y="235" fill="#526e52" stroke="none" width="50" height="20" rx="0" ry="0" class="labelBox"></rect><text x="72.5" y="250" fill="white" class="labelText"><tspan x="72.5">opt</tspan></text><text x="175" y="250" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175">[ Extra response ]</tspan></text></g><g><rect x="0" y="315" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="315" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="352.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><rect x="200" y="315" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="315" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Bob</div></div></foreignobject><text x="275" y="352.5" class="actor" style="text-anchor: middle;">Bob</text></switch></g></svg></div><h2 id="styling">Styling</h2>
<p>Styling of the a sequence diagram is done by defining a number of css classes.  During rendering these classes are extracted from the</p>
<h3 id="classes-used">Classes used</h3>
<table>
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>actor</td>
<td>Style for the actor box at the top of the diagram.</td>
</tr>
<tr>
<td>text.actor</td>
<td>Styles for text in the actor box at the top of the diagram.</td>
</tr>
<tr>
<td>actor-line</td>
<td>The vertical line for an actor.</td>
</tr>
<tr>
<td>messageLine0</td>
<td>Styles for the solid message line.</td>
</tr>
<tr>
<td>messageLine1</td>
<td>Styles for the dotted message line.</td>
</tr>
<tr>
<td>messageText</td>
<td>Defines styles for the text on the message arrows.</td>
</tr>
<tr>
<td>labelBox</td>
<td>Defines styles label to left in a loop.</td>
</tr>
<tr>
<td>labelText</td>
<td>Styles for the text in label for loops.</td>
</tr>
<tr>
<td>loopText</td>
<td>Styles for the text in the loop box.</td>
</tr>
<tr>
<td>loopLine</td>
<td>Defines styles for the lines in the loop box.</td>
</tr>
<tr>
<td>note</td>
<td>Styles for the note box.</td>
</tr>
<tr>
<td>noteText</td>
<td>Styles for the text on in the note boxes.</td>
</tr>
</tbody>
</table>
<h3 id="sample-stylesheet">Sample stylesheet</h3>
<pre class="css"><code class="hljs">
<span class="hljs-tag">body</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> white</span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-class">.actor</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#CCCCFF</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#ECECFF</span></span></span>;
<span class="hljs-rule">}</span></span>
<span class="hljs-tag">text</span><span class="hljs-class">.actor</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value">black</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value">none</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> Helvetica</span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-class">.actor-line</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value">grey</span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-class">.messageLine0</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">stroke-width</span>:<span class="hljs-value"><span class="hljs-number">1.5</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke-dasharray</span>:<span class="hljs-value"> <span class="hljs-string">"2 2"</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">marker-end</span>:<span class="hljs-value"><span class="hljs-string">"url(#arrowhead)"</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value">black</span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-class">.messageLine1</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">stroke-width</span>:<span class="hljs-value"><span class="hljs-number">1.5</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke-dasharray</span>:<span class="hljs-value"> <span class="hljs-string">"2 2"</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value">black</span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-id">#arrowhead</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value">black</span></span>;

<span class="hljs-rule">}</span></span>

<span class="hljs-class">.messageText</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value">black</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value">none</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> <span class="hljs-string">'trebuchet ms'</span>, verdana, arial</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"><span class="hljs-number">14px</span></span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-class">.labelBox</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#CCCCFF</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#ECECFF</span></span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-class">.labelText</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value">black</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value">none</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> <span class="hljs-string">'trebuchet ms'</span>, verdana, arial</span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-class">.loopText</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value">black</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value">none</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> <span class="hljs-string">'trebuchet ms'</span>, verdana, arial</span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-class">.loopLine</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">stroke-width</span>:<span class="hljs-value"><span class="hljs-number">2</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke-dasharray</span>:<span class="hljs-value"> <span class="hljs-string">"2 2"</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">marker-end</span>:<span class="hljs-value"><span class="hljs-string">"url(#arrowhead)"</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#CCCCFF</span></span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-class">.note</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#decc93</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#CCCCFF</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff5ad</span></span></span>;
<span class="hljs-rule">}</span></span>

<span class="hljs-class">.noteText</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value">black</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value">none</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> <span class="hljs-string">'trebuchet ms'</span>, verdana, arial</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"><span class="hljs-number">14px</span></span></span>;
<span class="hljs-rule">}</span></span></code></pre><h2 id="configuration">Configuration</h2>
<p>Is it possible to adjust the margins for rendering the sequence diagram.</p>
<p>This is done by defining <strong>mermaid.sequenceConfig</strong> or by the CLI to use a json file with the configuration. How to use<br>the CLI is described in the mermaidCLI page.<br>mermaid.sequenceConfig can be set to a JSON string with config parameters or the corresponding object.</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaid</span><span class="hljs-class">.sequenceConfig</span> = <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">diagramMarginX</span>:<span class="hljs-value"><span class="hljs-number">50</span>,
    diagramMarginY:<span class="hljs-number">10</span>,
    boxTextMargin:<span class="hljs-number">5</span>,
    noteMargin:<span class="hljs-number">10</span>,
    messageMargin:<span class="hljs-number">35</span>,
    mirrorActors:true
    </span></span></span>};</code></pre><h3 id="possible-configration-params-">Possible configration params:</h3>
<table>
<thead>
<tr>
<th>Param</th>
<th>Descriotion</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>mirrorActor</td>
<td>Turns on/off the rendering of actors below the diagram as well as above it</td>
<td>false</td>
</tr>
<tr>
<td>bottomMarginAdj</td>
<td>Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.</td>
<td>1</td>
</tr>
</tbody>
</table>

<h1 id="gant-diagrams">Gant diagrams</h1>
<blockquote>
<p>A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.</p>
</blockquote>
<p>Mermaid can render Gantt diagrams. The code snippet below:</p>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">of</span> <span class="hljs-tag">sequence</span> <span class="hljs-tag">diagram</span>
<span class="hljs-tag">gantt</span>
    <span class="hljs-tag">title</span> <span class="hljs-tag">A</span> <span class="hljs-tag">Gantt</span> <span class="hljs-tag">Diagram</span>

    <span class="hljs-tag">section</span> <span class="hljs-tag">Section</span>
    <span class="hljs-tag">A</span> <span class="hljs-tag">task</span>           <span class="hljs-pseudo">:a1</span>, 2014<span class="hljs-tag">-01-01</span>, 30<span class="hljs-tag">d</span>
    <span class="hljs-tag">Another</span> <span class="hljs-tag">task</span>     <span class="hljs-pseudo">:after</span> <span class="hljs-tag">a1</span>  , 20<span class="hljs-tag">d</span>
    <span class="hljs-tag">section</span> <span class="hljs-tag">Another</span>
    <span class="hljs-tag">Task</span> <span class="hljs-tag">in</span> <span class="hljs-tag">sec</span>      <span class="hljs-pseudo">:2014-01-12</span>  , 12<span class="hljs-tag">d</span>
    <span class="hljs-tag">anther</span> <span class="hljs-tag">task</span>      : 24<span class="hljs-tag">d</span></code></pre><p>Renders the following diagram:</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart32" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 1046 196"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.section { stroke: none; opacity: 0.2;}
.section0 { fill: rgb(110, 170, 73);}
.section1, .section3 { fill: white; opacity: 0.2;}
.sectionTitle0 { fill: rgb(51, 51, 51);}
.sectionTitle1 { fill: rgb(51, 51, 51);}
.sectionTitle { text-anchor: start; font-size: 11px;}
.grid .tick { stroke: lightgrey; opacity: 0.3; shape-rendering: crispEdges;}
.grid path { stroke-width: 0;}
.today { fill: none; stroke: red; stroke-width: 2px;}
.task { stroke-width: 2;}
.taskText { text-anchor: middle; font-size: 11px;}
.taskText0, .taskText1, .taskText2, .taskText3 { fill: white;}
.task0, .task1, .task2, .task3 { fill: rgb(72, 126, 58); stroke: rgb(19, 84, 12);}
.titleText { text-anchor: middle; font-size: 18px; fill: black;}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g class="grid" transform="translate(75, 146)"><g class="tick" transform="translate(90,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 01</text></g><g class="tick" transform="translate(215,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 02</text></g><g class="tick" transform="translate(340,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 03</text></g><g class="tick" transform="translate(466,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 04</text></g><g class="tick" transform="translate(591,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 05</text></g><g class="tick" transform="translate(717,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 06</text></g><g class="tick" transform="translate(842,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 07</text></g><path class="domain" d="M0,0V0H896V0"></path></g><g><rect x="0" y="48" width="1008.5" height="24" class="section section0"></rect><rect x="0" y="72" width="1008.5" height="24" class="section section0"></rect><rect x="0" y="96" width="1008.5" height="24" class="section section1"></rect><rect x="0" y="120" width="1008.5" height="24" class="section section1"></rect></g><g><rect rx="3" ry="3" x="75" y="50" width="538" height="20" class="task  task0"></rect><rect rx="3" ry="3" x="613" y="74" width="358" height="20" class="task  task0"></rect><rect rx="3" ry="3" x="272" y="98" width="215" height="20" class="task  task1"></rect><rect rx="3" ry="3" x="487" y="122" width="430" height="20" class="task  task1"></rect><text font-size="11" x="344" y="63.5" text-height="20" class="taskText taskText0 ">A task           </text><text font-size="11" x="792" y="87.5" text-height="20" class="taskText taskText0 ">Another task     </text><text font-size="11" x="379.5" y="111.5" text-height="20" class="taskText taskText1 ">Task in sec      </text><text font-size="11" x="702" y="135.5" text-height="20" class="taskText taskText1 ">anther task      </text></g><g><text x="10" y="74" class="sectionTitle sectionTitle0">Section</text><text x="10" y="122" class="sectionTitle sectionTitle1">Another</text></g><g class="today"><line x1="21056" x2="21056" y1="25" y2="171" class="today"></line></g><text x="523" y="25" class="titleText">A Gantt Diagram</text></svg></div><h2 id="syntax">Syntax</h2>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">with</span> <span class="hljs-tag">slection</span> <span class="hljs-tag">of</span> <span class="hljs-tag">syntaxes</span>
        <span class="hljs-tag">gantt</span>
        <span class="hljs-tag">dateFormat</span>  <span class="hljs-tag">YYYY-MM-DD</span>
        <span class="hljs-tag">title</span> <span class="hljs-tag">Adding</span> <span class="hljs-tag">GANTT</span> <span class="hljs-tag">diagram</span> <span class="hljs-tag">functionality</span> <span class="hljs-tag">to</span> <span class="hljs-tag">mermaid</span>

        <span class="hljs-tag">section</span> <span class="hljs-tag">A</span> <span class="hljs-tag">section</span>
        <span class="hljs-tag">Completed</span> <span class="hljs-tag">task</span>            <span class="hljs-pseudo">:done</span>,    <span class="hljs-tag">des1</span>, 2014<span class="hljs-tag">-01-06</span>,2014<span class="hljs-tag">-01-08</span>
        <span class="hljs-tag">Active</span> <span class="hljs-tag">task</span>               <span class="hljs-pseudo">:active</span>,  <span class="hljs-tag">des2</span>, 2014<span class="hljs-tag">-01-09</span>, 3<span class="hljs-tag">d</span>
        <span class="hljs-tag">Future</span> <span class="hljs-tag">task</span>               :         <span class="hljs-tag">des3</span>, <span class="hljs-tag">after</span> <span class="hljs-tag">des2</span>, 5<span class="hljs-tag">d</span>
        <span class="hljs-tag">Future</span> <span class="hljs-tag">task2</span>               :         <span class="hljs-tag">des4</span>, <span class="hljs-tag">after</span> <span class="hljs-tag">des3</span>, 5<span class="hljs-tag">d</span>

        <span class="hljs-tag">section</span> <span class="hljs-tag">Critical</span> <span class="hljs-tag">tasks</span>
        <span class="hljs-tag">Completed</span> <span class="hljs-tag">task</span> <span class="hljs-tag">in</span> <span class="hljs-tag">the</span> <span class="hljs-tag">critical</span> <span class="hljs-tag">line</span> <span class="hljs-pseudo">:crit</span>, <span class="hljs-tag">done</span>, 2014<span class="hljs-tag">-01-06</span>,24<span class="hljs-tag">h</span>
        <span class="hljs-tag">Implement</span> <span class="hljs-tag">parser</span> <span class="hljs-tag">and</span> <span class="hljs-tag">jison</span>          <span class="hljs-pseudo">:crit</span>, <span class="hljs-tag">done</span>, <span class="hljs-tag">after</span> <span class="hljs-tag">des1</span>, 2<span class="hljs-tag">d</span>
        <span class="hljs-tag">Create</span> <span class="hljs-tag">tests</span> <span class="hljs-tag">for</span> <span class="hljs-tag">parser</span>             <span class="hljs-pseudo">:crit</span>, <span class="hljs-tag">active</span>, 3<span class="hljs-tag">d</span>
        <span class="hljs-tag">Future</span> <span class="hljs-tag">task</span> <span class="hljs-tag">in</span> <span class="hljs-tag">critical</span> <span class="hljs-tag">line</span>        <span class="hljs-pseudo">:crit</span>, 5<span class="hljs-tag">d</span>
        <span class="hljs-tag">Create</span> <span class="hljs-tag">tests</span> <span class="hljs-tag">for</span> <span class="hljs-tag">renderer</span>           <span class="hljs-pseudo">:2d</span>
        <span class="hljs-tag">Add</span> <span class="hljs-tag">to</span> <span class="hljs-tag">mermaid</span>                      <span class="hljs-pseudo">:1d</span>

        <span class="hljs-tag">section</span> <span class="hljs-tag">Documentation</span>
        <span class="hljs-tag">Describe</span> <span class="hljs-tag">gantt</span> <span class="hljs-tag">syntax</span>               <span class="hljs-pseudo">:active</span>, <span class="hljs-tag">a1</span>, <span class="hljs-tag">after</span> <span class="hljs-tag">des1</span>, 3<span class="hljs-tag">d</span>
        <span class="hljs-tag">Add</span> <span class="hljs-tag">gantt</span> <span class="hljs-tag">diagram</span> <span class="hljs-tag">to</span> <span class="hljs-tag">demo</span> <span class="hljs-tag">page</span>      <span class="hljs-pseudo">:after</span> <span class="hljs-tag">a1</span>  , 20<span class="hljs-tag">h</span>
        <span class="hljs-tag">Add</span> <span class="hljs-tag">another</span> <span class="hljs-tag">diagram</span> <span class="hljs-tag">to</span> <span class="hljs-tag">demo</span> <span class="hljs-tag">page</span>    <span class="hljs-pseudo">:doc1</span>, <span class="hljs-tag">after</span> <span class="hljs-tag">a1</span>  , 48<span class="hljs-tag">h</span>

        <span class="hljs-tag">section</span> <span class="hljs-tag">Last</span> <span class="hljs-tag">section</span>
        <span class="hljs-tag">Describe</span> <span class="hljs-tag">gantt</span> <span class="hljs-tag">syntax</span>               <span class="hljs-pseudo">:after</span> <span class="hljs-tag">doc1</span>, 3<span class="hljs-tag">d</span>
        <span class="hljs-tag">Add</span> <span class="hljs-tag">gantt</span> <span class="hljs-tag">diagram</span> <span class="hljs-tag">to</span> <span class="hljs-tag">demo</span> <span class="hljs-tag">page</span>      : 20<span class="hljs-tag">h</span>
        <span class="hljs-tag">Add</span> <span class="hljs-tag">another</span> <span class="hljs-tag">diagram</span> <span class="hljs-tag">to</span> <span class="hljs-tag">demo</span> <span class="hljs-tag">page</span>    : 48<span class="hljs-tag">h</span></code></pre><p>Renders like below:</p>
<div class="mermaid" data-processed="true"><svg id="mermaidChart33" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 1046 484"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.section { stroke: none; opacity: 0.2;}
.section0 { fill: rgb(110, 170, 73);}
.section2 { fill: rgb(110, 170, 73);}
.section1, .section3 { fill: white; opacity: 0.2;}
.sectionTitle0 { fill: rgb(51, 51, 51);}
.sectionTitle1 { fill: rgb(51, 51, 51);}
.sectionTitle2 { fill: rgb(51, 51, 51);}
.sectionTitle { text-anchor: start; font-size: 11px;}
.grid .tick { stroke: lightgrey; opacity: 0.3; shape-rendering: crispEdges;}
.grid path { stroke-width: 0;}
.today { fill: none; stroke: red; stroke-width: 2px;}
.task { stroke-width: 2;}
.taskText { text-anchor: middle; font-size: 11px;}
.taskTextOutsideRight { fill: black; text-anchor: start; font-size: 11px;}
.taskTextOutsideLeft { fill: black; text-anchor: end; font-size: 11px;}
.taskText0, .taskText1, .taskText2, .taskText3 { fill: white;}
.task0, .task1, .task2, .task3 { fill: rgb(72, 126, 58); stroke: rgb(19, 84, 12);}
.taskTextOutside0, .taskTextOutside2 { fill: black;}
.taskTextOutside1, .taskTextOutside3 { fill: black;}
.active0, .active1, .active2, .active3 { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12);}
.activeText0, .activeText1, .activeText2, .activeText3 { fill: black !important;}
.done0, .done1, .done2, .done3 { stroke: grey; fill: lightgrey; stroke-width: 2;}
.doneText0, .doneText1, .doneText2, .doneText3 { fill: black !important;}
.crit0, .crit1, .crit2, .crit3 { stroke: rgb(255, 136, 136); fill: red; stroke-width: 2;}
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 { stroke: rgb(255, 136, 136); fill: rgb(205, 228, 152); stroke-width: 2;}
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 { stroke: rgb(255, 136, 136); fill: lightgrey; stroke-width: 2; cursor: pointer; shape-rendering: crispEdges;}
.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 { fill: black !important;}
.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 { fill: black !important;}
.titleText { text-anchor: middle; font-size: 18px; fill: black;}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g class="grid" transform="translate(75, 434)"><g class="tick" transform="translate(0,0)" style="opacity: 1;"><line y2="-399" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 01</text></g><g class="tick" transform="translate(392,0)" style="opacity: 1;"><line y2="-399" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 02</text></g><g class="tick" transform="translate(784,0)" style="opacity: 1;"><line y2="-399" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 03</text></g><path class="domain" d="M0,0V0H896V0"></path></g><g><rect x="0" y="48" width="1008.5" height="24" class="section section0"></rect><rect x="0" y="72" width="1008.5" height="24" class="section section0"></rect><rect x="0" y="96" width="1008.5" height="24" class="section section0"></rect><rect x="0" y="120" width="1008.5" height="24" class="section section0"></rect><rect x="0" y="144" width="1008.5" height="24" class="section section1"></rect><rect x="0" y="168" width="1008.5" height="24" class="section section1"></rect><rect x="0" y="192" width="1008.5" height="24" class="section section1"></rect><rect x="0" y="216" width="1008.5" height="24" class="section section1"></rect><rect x="0" y="240" width="1008.5" height="24" class="section section1"></rect><rect x="0" y="264" width="1008.5" height="24" class="section section1"></rect><rect x="0" y="288" width="1008.5" height="24" class="section section2"></rect><rect x="0" y="312" width="1008.5" height="24" class="section section2"></rect><rect x="0" y="336" width="1008.5" height="24" class="section section2"></rect><rect x="0" y="360" width="1008.5" height="24" class="section section0"></rect><rect x="0" y="384" width="1008.5" height="24" class="section section0"></rect><rect x="0" y="408" width="1008.5" height="24" class="section section0"></rect></g><g><rect rx="3" ry="3" x="75" y="50" width="112" height="20" class="task  done0"></rect><rect rx="3" ry="3" x="243" y="74" width="168" height="20" class="task  active0"></rect><rect rx="3" ry="3" x="411" y="98" width="280" height="20" class="task  task0"></rect><rect rx="3" ry="3" x="691" y="122" width="280" height="20" class="task  task0"></rect><rect rx="3" ry="3" x="75" y="146" width="56" height="20" class="task  doneCrit1"></rect><rect rx="3" ry="3" x="187" y="170" width="112" height="20" class="task  doneCrit1"></rect><rect rx="3" ry="3" x="299" y="194" width="168" height="20" class="task  activeCrit1"></rect><rect rx="3" ry="3" x="467" y="218" width="280" height="20" class="task  crit1"></rect><rect rx="3" ry="3" x="747" y="242" width="112" height="20" class="task  task1"></rect><rect rx="3" ry="3" x="859" y="266" width="56" height="20" class="task  task1"></rect><rect rx="3" ry="3" x="187" y="290" width="168" height="20" class="task  active2"></rect><rect rx="3" ry="3" x="355" y="314" width="47" height="20" class="task  task2"></rect><rect rx="3" ry="3" x="355" y="338" width="112" height="20" class="task  task2"></rect><rect rx="3" ry="3" x="467" y="362" width="168" height="20" class="task  task0"></rect><rect rx="3" ry="3" x="635" y="386" width="47" height="20" class="task  task0"></rect><rect rx="3" ry="3" x="682" y="410" width="112" height="20" class="task  task0"></rect><text font-size="11" x="131" y="63.5" text-height="20" class="taskText taskText0  doneText0">Completed task            </text><text font-size="11" x="327" y="87.5" text-height="20" class="taskText taskText0 activeText0">Active task               </text><text font-size="11" x="551" y="111.5" text-height="20" class="taskText taskText0 ">Future task               </text><text font-size="11" x="831" y="135.5" text-height="20" class="taskText taskText0 ">Future task2               </text><text font-size="11" x="136" y="159.5" text-height="20" class="taskTextOutsideRight taskTextOutside1  doneCritText1">Completed task in the critical line </text><text font-size="11" x="304" y="183.5" text-height="20" class="taskTextOutsideRight taskTextOutside1  doneCritText1">Implement parser and jison          </text><text font-size="11" x="383" y="207.5" text-height="20" class="taskText taskText1 activeCritText1 critText1">Create tests for parser             </text><text font-size="11" x="607" y="231.5" text-height="20" class="taskText taskText1  critText1">Future task in critical line        </text><text font-size="11" x="742" y="255.5" text-height="20" class="taskTextOutsideLeft taskTextOutside1 ">Create tests for renderer           </text><text font-size="11" x="854" y="279.5" text-height="20" class="taskTextOutsideLeft taskTextOutside1 ">Add to mermaid                      </text><text font-size="11" x="271" y="303.5" text-height="20" class="taskText taskText2 activeText2">Describe gantt syntax               </text><text font-size="11" x="407" y="327.5" text-height="20" class="taskTextOutsideRight taskTextOutside2 ">Add gantt diagram to demo page      </text><text font-size="11" x="472" y="351.5" text-height="20" class="taskTextOutsideRight taskTextOutside2 ">Add another diagram to demo page    </text><text font-size="11" x="551" y="375.5" text-height="20" class="taskText taskText0 ">Describe gantt syntax               </text><text font-size="11" x="687" y="399.5" text-height="20" class="taskTextOutsideRight taskTextOutside0 ">Add gantt diagram to demo page      </text><text font-size="11" x="677" y="423.5" text-height="20" class="taskTextOutsideLeft taskTextOutside0 ">Add another diagram to demo page    </text></g><g><text x="10" y="98" class="sectionTitle sectionTitle0">A section</text><text x="10" y="218" class="sectionTitle sectionTitle1">Critical tasks</text><text x="10" y="326" class="sectionTitle sectionTitle2">Documentation</text><text x="10" y="398" class="sectionTitle sectionTitle0">Last section</text></g><g class="today"><line x1="65362" x2="65362" y1="25" y2="459" class="today"></line></g><text x="523" y="25" class="titleText">Adding GANTT diagram functionality to mermaid</text></svg></div><h3 id="title">title</h3>
<p>Tbd</p>
<h2 id="sections-statements">Sections statements</h2>
<p>Tbd</p>
<h2 id="setting-dates">Setting dates</h2>
<p>Tbd</p>
<h3 id="date-format">Date format</h3>
<p>Tbd</p>
<h4 id="diagram-definition">Diagram definition</h4>
<p>Input    Example    Description:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">YYYY</span>    2014    4 <span class="hljs-tag">digit</span> <span class="hljs-tag">year</span>
<span class="hljs-tag">YY</span>    14    2 <span class="hljs-tag">digit</span> <span class="hljs-tag">year</span>
<span class="hljs-tag">Q</span>    1.<span class="hljs-class">.4</span>    <span class="hljs-tag">Quarter</span> <span class="hljs-tag">of</span> <span class="hljs-tag">year</span>. <span class="hljs-tag">Sets</span> <span class="hljs-tag">month</span> <span class="hljs-tag">to</span> <span class="hljs-tag">first</span> <span class="hljs-tag">month</span> <span class="hljs-tag">in</span> <span class="hljs-tag">quarter</span>.
<span class="hljs-tag">M</span> <span class="hljs-tag">MM</span>    1.<span class="hljs-class">.12</span>    <span class="hljs-tag">Month</span> <span class="hljs-tag">number</span>
<span class="hljs-tag">MMM</span> <span class="hljs-tag">MMMM</span>    <span class="hljs-tag">January</span>.<span class="hljs-class">.Dec</span>    <span class="hljs-tag">Month</span> <span class="hljs-tag">name</span> <span class="hljs-tag">in</span> <span class="hljs-tag">locale</span> <span class="hljs-tag">set</span> <span class="hljs-tag">by</span> <span class="hljs-tag">moment</span><span class="hljs-class">.locale</span>()
<span class="hljs-tag">D</span> <span class="hljs-tag">DD</span>    1.<span class="hljs-class">.31</span>    <span class="hljs-tag">Day</span> <span class="hljs-tag">of</span> <span class="hljs-tag">month</span>
<span class="hljs-tag">Do</span>    1<span class="hljs-tag">st</span>.<span class="hljs-class">.31st</span>    <span class="hljs-tag">Day</span> <span class="hljs-tag">of</span> <span class="hljs-tag">month</span> <span class="hljs-tag">with</span> <span class="hljs-tag">ordinal</span>
<span class="hljs-tag">DDD</span> <span class="hljs-tag">DDDD</span>    1.<span class="hljs-class">.365</span>    <span class="hljs-tag">Day</span> <span class="hljs-tag">of</span> <span class="hljs-tag">year</span>
<span class="hljs-tag">X</span>    1410715640<span class="hljs-class">.579</span>    <span class="hljs-tag">Unix</span> <span class="hljs-tag">timestamp</span>
<span class="hljs-tag">x</span>    1410715640579    <span class="hljs-tag">Unix</span> <span class="hljs-tag">ms</span> <span class="hljs-tag">timestamp</span>

<span class="hljs-tag">Input</span>    <span class="hljs-tag">Example</span>    <span class="hljs-tag">Description</span>
<span class="hljs-tag">H</span> <span class="hljs-tag">HH</span>    0.<span class="hljs-class">.23</span>    24 <span class="hljs-tag">hour</span> <span class="hljs-tag">time</span>
<span class="hljs-tag">h</span> <span class="hljs-tag">hh</span>    1.<span class="hljs-class">.12</span>    12 <span class="hljs-tag">hour</span> <span class="hljs-tag">time</span> <span class="hljs-tag">used</span> <span class="hljs-tag">with</span> <span class="hljs-tag">a</span> <span class="hljs-tag">A</span>.
<span class="hljs-tag">a</span> <span class="hljs-tag">A</span>    <span class="hljs-tag">am</span> <span class="hljs-tag">pm</span>    <span class="hljs-tag">Post</span> <span class="hljs-tag">or</span> <span class="hljs-tag">ante</span> <span class="hljs-tag">meridiem</span>
<span class="hljs-tag">m</span> <span class="hljs-tag">mm</span>    0.<span class="hljs-class">.59</span>    <span class="hljs-tag">Minutes</span>
<span class="hljs-tag">s</span> <span class="hljs-tag">ss</span>    0.<span class="hljs-class">.59</span>    <span class="hljs-tag">Seconds</span>
<span class="hljs-tag">S</span>    0.<span class="hljs-class">.9</span>    <span class="hljs-tag">Tenths</span> <span class="hljs-tag">of</span> <span class="hljs-tag">a</span> <span class="hljs-tag">second</span>
<span class="hljs-tag">SS</span>    0.<span class="hljs-class">.99</span>    <span class="hljs-tag">Hundreds</span> <span class="hljs-tag">of</span> <span class="hljs-tag">a</span> <span class="hljs-tag">second</span>
<span class="hljs-tag">SSS</span>    0.<span class="hljs-class">.999</span>    <span class="hljs-tag">Thousandths</span> <span class="hljs-tag">of</span> <span class="hljs-tag">a</span> <span class="hljs-tag">second</span>
<span class="hljs-tag">Z</span> <span class="hljs-tag">ZZ</span>    +12<span class="hljs-pseudo">:00</span>    <span class="hljs-tag">Offset</span> <span class="hljs-tag">from</span> <span class="hljs-tag">UTC</span> <span class="hljs-tag">as</span> +<span class="hljs-tag">-HH</span><span class="hljs-pseudo">:mm</span>, +<span class="hljs-tag">-HHmm</span>, <span class="hljs-tag">or</span> <span class="hljs-tag">Z</span></code></pre><p>More info in: <a href="http://momentjs.com/docs/#/parsing/string-format/">http://momentjs.com/docs/#/parsing/string-format/</a></p>
<h4 id="scale">Scale</h4>
<pre class="css"><code class="hljs">%<span class="hljs-tag">a</span> <span class="hljs-tag">-</span> <span class="hljs-tag">abbreviated</span> <span class="hljs-tag">weekday</span> <span class="hljs-tag">name</span>.
%<span class="hljs-tag">A</span> <span class="hljs-tag">-</span> <span class="hljs-tag">full</span> <span class="hljs-tag">weekday</span> <span class="hljs-tag">name</span>.
%<span class="hljs-tag">b</span> <span class="hljs-tag">-</span> <span class="hljs-tag">abbreviated</span> <span class="hljs-tag">month</span> <span class="hljs-tag">name</span>.
%<span class="hljs-tag">B</span> <span class="hljs-tag">-</span> <span class="hljs-tag">full</span> <span class="hljs-tag">month</span> <span class="hljs-tag">name</span>.
%<span class="hljs-tag">c</span> <span class="hljs-tag">-</span> <span class="hljs-tag">date</span> <span class="hljs-tag">and</span> <span class="hljs-tag">time</span>, <span class="hljs-tag">as</span> "%<span class="hljs-tag">a</span> %<span class="hljs-tag">b</span> %<span class="hljs-tag">e</span> %<span class="hljs-tag">H</span>:%<span class="hljs-tag">M</span>:%<span class="hljs-tag">S</span> %<span class="hljs-tag">Y</span>".
%<span class="hljs-tag">d</span> <span class="hljs-tag">-</span> <span class="hljs-tag">zero-padded</span> <span class="hljs-tag">day</span> <span class="hljs-tag">of</span> <span class="hljs-tag">the</span> <span class="hljs-tag">month</span> <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[01,31]</span>.
%<span class="hljs-tag">e</span> <span class="hljs-tag">-</span> <span class="hljs-tag">space-padded</span> <span class="hljs-tag">day</span> <span class="hljs-tag">of</span> <span class="hljs-tag">the</span> <span class="hljs-tag">month</span> <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[ 1,31]</span>; <span class="hljs-tag">equivalent</span> <span class="hljs-tag">to</span> %_<span class="hljs-tag">d</span>.
%<span class="hljs-tag">H</span> <span class="hljs-tag">-</span> <span class="hljs-tag">hour</span> (24<span class="hljs-tag">-hour</span> <span class="hljs-tag">clock</span>) <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[00,23]</span>.
%<span class="hljs-tag">I</span> <span class="hljs-tag">-</span> <span class="hljs-tag">hour</span> (12<span class="hljs-tag">-hour</span> <span class="hljs-tag">clock</span>) <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[01,12]</span>.
%<span class="hljs-tag">j</span> <span class="hljs-tag">-</span> <span class="hljs-tag">day</span> <span class="hljs-tag">of</span> <span class="hljs-tag">the</span> <span class="hljs-tag">year</span> <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[001,366]</span>.
%<span class="hljs-tag">m</span> <span class="hljs-tag">-</span> <span class="hljs-tag">month</span> <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[01,12]</span>.
%<span class="hljs-tag">M</span> <span class="hljs-tag">-</span> <span class="hljs-tag">minute</span> <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[00,59]</span>.
%<span class="hljs-tag">L</span> <span class="hljs-tag">-</span> <span class="hljs-tag">milliseconds</span> <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[000, 999]</span>.
%<span class="hljs-tag">p</span> <span class="hljs-tag">-</span> <span class="hljs-tag">either</span> <span class="hljs-tag">AM</span> <span class="hljs-tag">or</span> <span class="hljs-tag">PM</span>.
%<span class="hljs-tag">S</span> <span class="hljs-tag">-</span> <span class="hljs-tag">second</span> <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[00,61]</span>.
%<span class="hljs-tag">U</span> <span class="hljs-tag">-</span> <span class="hljs-tag">week</span> <span class="hljs-tag">number</span> <span class="hljs-tag">of</span> <span class="hljs-tag">the</span> <span class="hljs-tag">year</span> (<span class="hljs-tag">Sunday</span> <span class="hljs-tag">as</span> <span class="hljs-tag">the</span> <span class="hljs-tag">first</span> <span class="hljs-tag">day</span> <span class="hljs-tag">of</span> <span class="hljs-tag">the</span> <span class="hljs-tag">week</span>) <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[00,53]</span>.
%<span class="hljs-tag">w</span> <span class="hljs-tag">-</span> <span class="hljs-tag">weekday</span> <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[0(Sunday),6]</span>.
%<span class="hljs-tag">W</span> <span class="hljs-tag">-</span> <span class="hljs-tag">week</span> <span class="hljs-tag">number</span> <span class="hljs-tag">of</span> <span class="hljs-tag">the</span> <span class="hljs-tag">year</span> (<span class="hljs-tag">Monday</span> <span class="hljs-tag">as</span> <span class="hljs-tag">the</span> <span class="hljs-tag">first</span> <span class="hljs-tag">day</span> <span class="hljs-tag">of</span> <span class="hljs-tag">the</span> <span class="hljs-tag">week</span>) <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[00,53]</span>.
%<span class="hljs-tag">x</span> <span class="hljs-tag">-</span> <span class="hljs-tag">date</span>, <span class="hljs-tag">as</span> "%<span class="hljs-tag">m</span>/%<span class="hljs-tag">d</span>/%<span class="hljs-tag">Y</span>".
%<span class="hljs-tag">X</span> <span class="hljs-tag">-</span> <span class="hljs-tag">time</span>, <span class="hljs-tag">as</span> "%<span class="hljs-tag">H</span>:%<span class="hljs-tag">M</span>:%<span class="hljs-tag">S</span>".
%<span class="hljs-tag">y</span> <span class="hljs-tag">-</span> <span class="hljs-tag">year</span> <span class="hljs-tag">without</span> <span class="hljs-tag">century</span> <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span> <span class="hljs-attr_selector">[00,99]</span>.
%<span class="hljs-tag">Y</span> <span class="hljs-tag">-</span> <span class="hljs-tag">year</span> <span class="hljs-tag">with</span> <span class="hljs-tag">century</span> <span class="hljs-tag">as</span> <span class="hljs-tag">a</span> <span class="hljs-tag">decimal</span> <span class="hljs-tag">number</span>.
%<span class="hljs-tag">Z</span> <span class="hljs-tag">-</span> <span class="hljs-tag">time</span> <span class="hljs-tag">zone</span> <span class="hljs-tag">offset</span>, <span class="hljs-tag">such</span> <span class="hljs-tag">as</span> "<span class="hljs-tag">-0700</span>".
%% <span class="hljs-tag">-</span> <span class="hljs-tag">a</span> <span class="hljs-tag">literal</span> "%" <span class="hljs-tag">character</span>.</code></pre><p>More info in: <a href="https://github.com/mbostock/d3/wiki/Time-Formatting">https://github.com/mbostock/d3/wiki/Time-Formatting</a></p>
<h2 id="styling">Styling</h2>
<p>Styling of the a sequence diagram is done by defining a number of css classes.  During rendering these classes are extracted from the</p>
<h3 id="classes-used">Classes used</h3>
<table>
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>actor</td>
<td>Style for the actor box at the top of the diagram.</td>
</tr>
<tr>
<td>text.actor</td>
<td>Styles for text in the actor box at the top of the diagram.</td>
</tr>
<tr>
<td>actor-line</td>
<td>The vertical line for an actor.</td>
</tr>
<tr>
<td>messageLine0</td>
<td>Styles for the solid message line.</td>
</tr>
<tr>
<td>messageLine1</td>
<td>Styles for the dotted message line.</td>
</tr>
<tr>
<td>messageText</td>
<td>Defines styles for the text on the message arrows.</td>
</tr>
<tr>
<td>labelBox</td>
<td>Defines styles label to left in a loop.</td>
</tr>
<tr>
<td>labelText</td>
<td>Styles for the text in label for loops.</td>
</tr>
<tr>
<td>loopText</td>
<td>Styles for the text in the loop box.</td>
</tr>
<tr>
<td>loopLine</td>
<td>Defines styles for the lines in the loop box.</td>
</tr>
<tr>
<td>note</td>
<td>Styles for the note box.</td>
</tr>
<tr>
<td>noteText</td>
<td>Styles for the text on in the note boxes.</td>
</tr>
</tbody>
</table>
<h3 id="sample-stylesheet">Sample stylesheet</h3>
<pre class="css"><code class="hljs">
            <span class="hljs-class">.grid</span> <span class="hljs-class">.tick</span> <span class="hljs-rules">{
                <span class="hljs-rule"><span class="hljs-attribute">stroke</span>:<span class="hljs-value"> lightgrey</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"> <span class="hljs-number">0.3</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">shape-rendering</span>:<span class="hljs-value"> crispEdges</span></span>;
            <span class="hljs-rule">}</span></span>
            <span class="hljs-class">.grid</span> <span class="hljs-tag">path</span> <span class="hljs-rules">{
                <span class="hljs-rule"><span class="hljs-attribute">stroke-width</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
            <span class="hljs-rule">}</span></span>


            <span class="hljs-id">#tag</span> <span class="hljs-rules">{
                <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> white</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#FA283D</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">150px</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> absolute</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> none</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">3px</span> <span class="hljs-number">6px</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> -<span class="hljs-number">80px</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">11px</span></span></span>;
            <span class="hljs-rule">}</span></span>



            <span class="hljs-id">#tag</span><span class="hljs-pseudo">:before</span> <span class="hljs-rules">{
                <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> solid transparent</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">content</span>:<span class="hljs-value"> <span class="hljs-string">' '</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"> <span class="hljs-number">50%</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> -<span class="hljs-number">5px</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> absolute</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">border-width</span>:<span class="hljs-value"> <span class="hljs-number">10px</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">border-bottom-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#FA283D</span></span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"> -<span class="hljs-number">20px</span></span></span>;
            <span class="hljs-rule">}</span></span>
            <span class="hljs-class">.taskText</span> <span class="hljs-rules">{
                <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value">white</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">text-anchor</span>:<span class="hljs-value">middle</span></span>;
            <span class="hljs-rule">}</span></span>
            <span class="hljs-class">.taskTextOutsideRight</span> <span class="hljs-rules">{
                <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value">black</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">text-anchor</span>:<span class="hljs-value">start</span></span>;
            <span class="hljs-rule">}</span></span>
            <span class="hljs-class">.taskTextOutsideLeft</span> <span class="hljs-rules">{
                <span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value">black</span></span>;
                <span class="hljs-rule"><span class="hljs-attribute">text-anchor</span>:<span class="hljs-value">end</span></span>;
            <span class="hljs-rule">}</span></span></code></pre><h2 id="configuration">Configuration</h2>
<p>Is it possible to adjust the margins for rendering the sequence diagram.</p>
<p>This is done by defining the <strong>sequenceConfig</strong> part of the configuration object. Read more about it <a href="http://knsv.github.io/mermaid/index.html#configuration28">here</a>. How to use<br>the CLI is described in the <a href="http://knsv.github.io/mermaid/(http://knsv.github.io/mermaid/index.html#mermaidCLI">mermaidCLI</a> page.</p>

<h1 id="mermaid-cli">mermaid CLI</h1>
<p>Installing mermaid globally (<code>npm install -g mermaid</code>) will expose the <code>mermaid</code> command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line.</p>
<p><strong>Note:</strong> The <code>mermaid</code> command requires <a href="http://phantomjs.org/">PhantomJS</a> (version <code>^1.9.0</code>) to be installed and available in your <em>$PATH</em>, or you can specify it's location with the <code>-e</code> option. For most environments, <code>npm install -g phantomjs</code> will satisfy this requirement.</p>
<h2 id="usage">Usage</h2>
<pre class="css"><code class="hljs">$ <span class="hljs-tag">mermaid</span> <span class="hljs-tag">--help</span>

<span class="hljs-tag">Usage</span>: <span class="hljs-tag">mermaid</span> <span class="hljs-attr_selector">[options]</span> <file>...

<span class="hljs-tag">file</span>    <span class="hljs-tag">The</span> <span class="hljs-tag">mermaid</span> <span class="hljs-tag">description</span> <span class="hljs-tag">file</span> <span class="hljs-tag">to</span> <span class="hljs-tag">be</span> <span class="hljs-tag">rendered</span>

<span class="hljs-tag">Options</span>:
  <span class="hljs-tag">-s</span> <span class="hljs-tag">--svg</span>             <span class="hljs-tag">Output</span> <span class="hljs-tag">SVG</span> <span class="hljs-tag">instead</span> <span class="hljs-tag">of</span> <span class="hljs-tag">PNG</span> (<span class="hljs-tag">experimental</span>)
  <span class="hljs-tag">-p</span> <span class="hljs-tag">--png</span>             <span class="hljs-tag">If</span> <span class="hljs-tag">SVG</span> <span class="hljs-tag">was</span> <span class="hljs-tag">selected</span>, <span class="hljs-tag">and</span> <span class="hljs-tag">you</span> <span class="hljs-tag">also</span> <span class="hljs-tag">want</span> <span class="hljs-tag">PNG</span>, <span class="hljs-tag">set</span> <span class="hljs-tag">this</span> <span class="hljs-tag">flag</span>
  <span class="hljs-tag">-o</span> <span class="hljs-tag">--outputDir</span>       <span class="hljs-tag">Directory</span> <span class="hljs-tag">to</span> <span class="hljs-tag">save</span> <span class="hljs-tag">files</span>, <span class="hljs-tag">will</span> <span class="hljs-tag">be</span> <span class="hljs-tag">created</span> <span class="hljs-tag">automatically</span>, <span class="hljs-tag">defaults</span> <span class="hljs-tag">to</span> `<span class="hljs-tag">cwd</span>`
  <span class="hljs-tag">-e</span> <span class="hljs-tag">--phantomPath</span>     <span class="hljs-tag">Specify</span> <span class="hljs-tag">the</span> <span class="hljs-tag">path</span> <span class="hljs-tag">to</span> <span class="hljs-tag">the</span> <span class="hljs-tag">phantomjs</span> <span class="hljs-tag">executable</span>
  <span class="hljs-tag">-c</span> <span class="hljs-tag">--sequenceConfig</span>  <span class="hljs-tag">Specify</span> <span class="hljs-tag">the</span> <span class="hljs-tag">path</span> <span class="hljs-tag">to</span> <span class="hljs-tag">the</span> <span class="hljs-tag">file</span> <span class="hljs-tag">with</span> <span class="hljs-tag">the</span> <span class="hljs-tag">configuration</span> <span class="hljs-tag">to</span> <span class="hljs-tag">be</span> <span class="hljs-tag">applied</span> <span class="hljs-tag">in</span> <span class="hljs-tag">the</span> <span class="hljs-tag">sequence</span> <span class="hljs-tag">diagram</span>
  <span class="hljs-tag">-h</span> <span class="hljs-tag">--help</span>            <span class="hljs-tag">Show</span> <span class="hljs-tag">this</span> <span class="hljs-tag">message</span>
  <span class="hljs-tag">-v</span> <span class="hljs-tag">--verbose</span>         <span class="hljs-tag">Show</span> <span class="hljs-tag">logging</span>
  <span class="hljs-tag">-w</span> <span class="hljs-tag">--width</span>           <span class="hljs-tag">width</span> <span class="hljs-tag">of</span> <span class="hljs-tag">the</span> <span class="hljs-tag">generated</span> <span class="hljs-tag">png</span> (<span class="hljs-tag">number</span>)
  <span class="hljs-tag">--version</span>            <span class="hljs-tag">Print</span> <span class="hljs-tag">version</span> <span class="hljs-tag">and</span> <span class="hljs-tag">quit</span></file></code></pre><pre class="css"><code class="hljs"><span class="hljs-tag">mermaid</span> <span class="hljs-tag">testGraph</span><span class="hljs-class">.mmd</span>
<span class="hljs-tag">mermaid</span> <span class="hljs-tag">testGraph</span><span class="hljs-class">.mmd</span> <span class="hljs-tag">-w</span> 980</code></pre><h2 id="sequence-diagram-configuration">Sequence diagram configuration</h2>
<p>The --sequenceConfig option allows overriding the sequence diagram configuration. It could be useful to increase the width between actors, the notes width or the margin to fit some large texts that are not well rendered with the default configuration, for example.</p>
<p>The content of the file must be a JSON like this:</p>
<pre class="css"><code class="hljs">
<span class="hljs-rules">{
    <span class="hljs-rule">"<span class="hljs-attribute">diagramMarginX"</span>:<span class="hljs-value"> <span class="hljs-number">100</span>,
    <span class="hljs-string">"diagramMarginY"</span>: <span class="hljs-number">10</span>,
    <span class="hljs-string">"actorMargin"</span>: <span class="hljs-number">150</span>,
    <span class="hljs-string">"width"</span>: <span class="hljs-number">150</span>,
    <span class="hljs-string">"height"</span>: <span class="hljs-number">65</span>,
    <span class="hljs-string">"boxMargin"</span>: <span class="hljs-number">10</span>,
    <span class="hljs-string">"boxTextMargin"</span>: <span class="hljs-number">5</span>,
    <span class="hljs-string">"noteMargin"</span>: <span class="hljs-number">10</span>,
    <span class="hljs-string">"messageMargin"</span>: <span class="hljs-number">35</span>
</span></span></span>}</code></pre><p>These properties will override the default values and if a property is not set in this object, it will left it empty and could raise an error. The current properties (measured in px) are:</p>
<ul>
<li>diagramMarginX: Size of the empty space to add at the left-right of the diagram.</li>
<li>diagramMarginY: Size of the empty space to add at the top-bottom of the diagram.</li>
<li>actorMargin: Horizontal space between each participant. The arrows between them would have this size too.</li>
<li>width: Width of the participant box.</li>
<li>height: Height of the participant box.</li>
<li>boxMargin: Blank area around loop boxes.</li>
<li>boxTextMargin: Blank area between the text and the border in a loop box.</li>
<li>noteMargin: Size of the empty space around a note.</li>
<li>messageMargin: Space between messages</li>
</ul>
<h2 id="cli-known-issues">CLI Known Issues</h2>
<ul>
<li>SVG output currently does some replacement on text, as mermaid's SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved.</li>
<li>SVG output is decidedly non-standard. It works, but may cause issues in some viewers.</li>
</ul>

<h1 id="demos">Demos</h1>
<h2 id="basic-flowchart">Basic flowchart</h2>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Example</span> <span class="hljs-tag">diagram</span>
<span class="hljs-tag">graph</span> <span class="hljs-tag">LR</span>
    <span class="hljs-tag">A</span><span class="hljs-attr_selector">[Square Rect]</span> <span class="hljs-tag">--</span> <span class="hljs-tag">Link</span> <span class="hljs-tag">text</span> <span class="hljs-tag">--</span>&gt; <span class="hljs-tag">B</span>((<span class="hljs-tag">Circle</span>))
    <span class="hljs-tag">A</span> <span class="hljs-tag">--</span>&gt; <span class="hljs-tag">C</span>(<span class="hljs-tag">Round</span> <span class="hljs-tag">Rect</span>)
    <span class="hljs-tag">B</span> <span class="hljs-tag">--</span>&gt; <span class="hljs-tag">D</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">Rhombus}
    C --&gt; D</span></span></span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart34" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 467.8000030517578 199" style="max-width:467.8000030517578px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart34 .node&gt;rect { ; }
#mermaidChart34 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart34 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart34 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M100.80423280423281,73.75L158.5,45.5L227.5,45.5" marker-end="url(#arrowhead221)" style="fill:none"></path><defs><marker id="arrowhead221" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M100.80423280423281,111.75L158.5,140L213,140" marker-end="url(#arrowhead222)" style="fill:none"></path><defs><marker id="arrowhead222" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M278.5,45.5L318,45.5L360.97405096022896,75.77594751389212" marker-end="url(#arrowhead223)" style="fill:none"></path><defs><marker id="arrowhead223" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M293,140L318,140L360.97405275428457,110.72405122840576" marker-end="url(#arrowhead224)" style="fill:none"></path><defs><marker id="arrowhead224" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform="translate(158.5,45.5)"><g transform="translate(-29.5,-9)" class="label"><foreignobject width="59" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Link text</span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(62,92.75)"><rect rx="0" ry="0" x="-42" y="-19" width="84" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-32,-9)"><foreignobject width="64" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Square Rect</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(253,45.5)"><circle x="-25.5" y="-19" r="25.5"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-15.5,-9)"><foreignobject width="31" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Circle</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="C" transform="translate(253,140)"><rect rx="5" ry="5" x="-40" y="-19" width="80" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-30,-9)"><foreignobject width="60" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Round Rect</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="D" transform="translate(385.4000015258789,92.75)"><polygon points="42.400000000000006,0 84.80000000000001,-42.400000000000006 42.400000000000006,-84.80000000000001 0,-42.400000000000006" rx="5" ry="5" transform="translate(-42.400000000000006,42.400000000000006)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-24,-9)"><foreignobject width="48" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Rhombus</div></foreignobject></g></g></g></g></g></g></svg></div><h2 id="larger-flowchart-with-some-styling">Larger flowchart with some styling</h2>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Code</span> <span class="hljs-tag">for</span> <span class="hljs-tag">flowchart</span> <span class="hljs-tag">below</span>
<span class="hljs-tag">graph</span> <span class="hljs-tag">TB</span>
    <span class="hljs-tag">sq</span><span class="hljs-attr_selector">[Square shape]</span> <span class="hljs-tag">--</span>&gt; <span class="hljs-tag">ci</span>((<span class="hljs-tag">Circle</span> <span class="hljs-tag">shape</span>))

    <span class="hljs-tag">subgraph</span> <span class="hljs-tag">A</span> <span class="hljs-tag">subgraph</span>
        <span class="hljs-tag">od</span>&gt;<span class="hljs-tag">Odd</span> <span class="hljs-tag">shape</span>]<span class="hljs-tag">--</span> <span class="hljs-tag">Two</span> <span class="hljs-tag">line</span>&lt;<span class="hljs-tag">br</span>&gt;<span class="hljs-tag">edge</span> <span class="hljs-tag">comment</span> <span class="hljs-tag">--</span>&gt; <span class="hljs-tag">ro</span>
        <span class="hljs-tag">di</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">Diamond with &lt;br/&gt; line break} -.-&gt; ro(Rounded&lt;br&gt;square&lt;br&gt;shape)
        di==&gt;ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --&gt; od3&gt;Really long text with linebreak&lt;br&gt;in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle&lt;br&gt;and some odd &lt;br&gt;special characters)) --&gt; f(,.?!+-*ز)

    cyr[Cyrillic]--&gt;cyr2((Circle shape Начало));

     classDef green fill</span>:<span class="hljs-value"><span class="hljs-hexcolor">#9f6</span>,stroke:<span class="hljs-hexcolor">#333</span>,stroke-width:<span class="hljs-number">2px</span></span></span>;
     <span class="hljs-rule"><span class="hljs-attribute">classDef orange fill</span>:<span class="hljs-value"><span class="hljs-hexcolor">#f96</span>,stroke:<span class="hljs-hexcolor">#333</span>,stroke-width:<span class="hljs-number">4px</span></span></span>;
     <span class="hljs-rule"><span class="hljs-attribute">class sq,e green
     class di orange</span></span></span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart35" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 1117.7999992370605 448.1999969482422" style="max-width:1117.7999992370605px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart35 .node&gt;rect { ; }
#mermaidChart35 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart35 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart35 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
.mermaid .label { font-family: "trebuchet ms", verdana, arial; color: rgb(51, 51, 51);}
.node rect, .node circle, .node polygon { fill: rgb(205, 228, 152); stroke: rgb(19, 84, 12); stroke-width: 1px;}
.edgePath .path { stroke: green; stroke-width: 1.5px;}
.cluster rect { fill: rgb(205, 255, 178) !important; rx: 4 !important; stroke: rgb(110, 170, 73) !important; stroke-width: 1px !important;}
.cluster text { fill: rgb(51, 51, 51);}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
#mermaidChart35 .green&gt;rect, .green&gt;polygon, .green&gt;ellipse { fill:#9f6; stroke:#333; stroke-width:2px; }
#mermaidChart35 .orange&gt;rect, .orange&gt;polygon, .orange&gt;ellipse { fill:#f96; stroke:#333; stroke-width:4px; }
/*  */
</style><g><g class="output"><g class="clusters"><g class="cluster" id="subGraph0" style="opacity: 1;" transform="translate(211.64999961853027,214.0999984741211)"><rect width="383.29999923706055" height="388.1999969482422" x="-191.64999961853027" y="-194.0999984741211"></rect><g class="label"><g transform="translate(0,0)"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"></div></foreignobject></g></g><text x="0" y="-180.10000610351562" fill="black" stroke="none" id="mermaidChart35Text" style="text-anchor: middle;"> A subgraph</text></g></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M483.79999923706055,125.5999984741211L483.79999923706055,211.1999969482422L483.79999923706055,275.6999969482422" marker-end="url(#arrowhead254)" style="fill:none"></path><defs><marker id="arrowhead254" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M103,126.0999984741211L102.5,211.1999969482422L122.01046511627906,281.6999969482422" marker-end="url(#arrowhead255)" style="fill:none"></path><defs><marker id="arrowhead255" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M262.7790161354324,142.6790153724929L211.79999923706055,211.1999969482422L159.62999973740688,281.6999969482422" marker-end="url(#arrowhead256)" style="stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;"></path><defs><marker id="arrowhead256" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M294.17521772501436,163.324783037925L298.29999923706055,211.1999969482422L298.29999923706055,299.6999969482422" marker-end="url(#arrowhead257)" style="stroke: #333; stroke-width: 3.5px;fill:none"></path><defs><marker id="arrowhead257" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M737.4295261277649,150.318831032408L683.2999992370605,211.1999969482422L683.7999992370605,291.1999969482422" marker-end="url(#arrowhead258)" style="fill:none"></path><defs><marker id="arrowhead258" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M815.1704723463562,150.318831032408L869.2999992370605,211.1999969482422L869.2999992370605,299.6999969482422" marker-end="url(#arrowhead259)" style="fill:none"></path><defs><marker id="arrowhead259" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M1013.2999992370605,125.5999984741211L1013.2999992370605,211.1999969482422L1013.2999992370605,254.1999969482422" marker-end="url(#arrowhead260)" style="fill:none"></path><defs><marker id="arrowhead260" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform="translate(102.5,211.1999969482422)"><g transform="translate(-39.5,-18)" class="label"><foreignobject width="79" height="36"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Two line<br>edge comment</span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignobject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignobject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="od" transform="translate(102.5,106.5999984741211)"><polygon points="-19,0 76,0 76,-38 -19,-38 0,-19" transform="translate(-38,19)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-28,-9)"><foreignobject width="56" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Odd shape</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="ro" transform="translate(132.25,318.6999969482422)"><rect rx="5" ry="5" x="-33" y="-37" width="66" height="74"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-23,-27)"><foreignobject width="46" height="54"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Rounded<br>square<br>shape</div></foreignobject></g></g></g><g class="node orange" style="opacity: 1;" id="di" transform="translate(288.29999923706055,106.5999984741211)"><polygon points="61.6,0 123.2,-61.6 61.6,-123.2 0,-61.6" rx="5" ry="5" transform="translate(-61.6,61.6)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-39,-18)"><foreignobject width="78" height="36"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Diamond with <br> line break</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="ro2" transform="translate(298.29999923706055,318.6999969482422)"><rect rx="5" ry="5" x="-70" y="-19" width="140" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-60,-9)"><foreignobject width="120" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Rounded square shape</div></foreignobject></g></g></g><g class="node green" style="opacity: 1;" id="sq" transform="translate(483.79999923706055,106.5999984741211)"><rect rx="0" ry="0" x="-45.5" y="-19" width="91" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-35.5,-9)"><foreignobject width="71" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Square shape</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="ci" transform="translate(483.79999923706055,318.6999969482422)"><circle x="-43" y="-19" r="43"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-33,-9)"><foreignobject width="66" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Circle shape</div></foreignobject></g></g></g><g class="node green" style="opacity: 1;" id="e" transform="translate(776.2999992370605,106.5999984741211)"><circle x="-58.5" y="-37" r="58.5"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-48.5,-27)"><foreignobject width="97" height="54"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Inner / circle<br>and some odd <br>special characters</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="od3" transform="translate(683.2999992370605,318.6999969482422)"><polygon points="-28,0 185,0 185,-56 -28,-56 0,-28" transform="translate(-92.5,28)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-82.5,-18)"><foreignobject width="165" height="36"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Really long text with linebreak<br>in an Odd shape</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="f" transform="translate(869.2999992370605,318.6999969482422)"><rect rx="5" ry="5" x="-29.5" y="-19" width="59" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-19.5,-9)"><foreignobject width="39" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">,.?!+-*ز</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="cyr" transform="translate(1013.2999992370605,106.5999984741211)"><rect rx="0" ry="0" x="-29" y="-19" width="58" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-19,-9)"><foreignobject width="38" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Cyrillic</div></foreignobject></g></g></g><g class="node" style="opacity: 1;" id="cyr2" transform="translate(1013.2999992370605,318.6999969482422)"><circle x="-64.5" y="-19" r="64.5"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-54.5,-9)"><foreignobject width="109" height="18"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">Circle shape Начало</div></foreignobject></g></g></g></g></g></g></svg></div><h2 id="basic-sequence-diagram">Basic sequence diagram</h2>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Sequence</span> <span class="hljs-tag">diagram</span> <span class="hljs-tag">code</span>
<span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">Alice</span> <span class="hljs-tag">-</span>&gt;&gt; <span class="hljs-tag">Bob</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">Bob</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">Bob--</span>&gt;&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">How</span> <span class="hljs-tag">about</span> <span class="hljs-tag">you</span> <span class="hljs-tag">John</span>?
    <span class="hljs-tag">Bob--x</span> <span class="hljs-tag">Alice</span>: <span class="hljs-tag">I</span> <span class="hljs-tag">am</span> <span class="hljs-tag">good</span> <span class="hljs-tag">thanks</span>!
    <span class="hljs-tag">Bob-x</span> <span class="hljs-tag">John</span>: <span class="hljs-tag">I</span> <span class="hljs-tag">am</span> <span class="hljs-tag">good</span> <span class="hljs-tag">thanks</span>!
    <span class="hljs-tag">Note</span> <span class="hljs-tag">right</span> <span class="hljs-tag">of</span> <span class="hljs-tag">John</span>: <span class="hljs-tag">Bob</span> <span class="hljs-tag">thinks</span> <span class="hljs-tag">a</span> <span class="hljs-tag">long</span>&lt;<span class="hljs-tag">br</span>/&gt;<span class="hljs-tag">long</span> <span class="hljs-tag">time</span>, <span class="hljs-tag">so</span> <span class="hljs-tag">long</span>&lt;<span class="hljs-tag">br</span>/&gt;<span class="hljs-tag">that</span> <span class="hljs-tag">the</span> <span class="hljs-tag">text</span> <span class="hljs-tag">does</span>&lt;<span class="hljs-tag">br</span>/&gt;<span class="hljs-tag">not</span> <span class="hljs-tag">fit</span> <span class="hljs-tag">on</span> <span class="hljs-tag">a</span> <span class="hljs-tag">row</span>.

    <span class="hljs-tag">Bob--</span>&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Checking</span> <span class="hljs-tag">with</span> <span class="hljs-tag">John</span>...
    <span class="hljs-tag">Alice-</span>&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Yes</span>... <span class="hljs-tag">John</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?</code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart36" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:750px;" viewBox="-50 -10 750 480"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
.messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
.messageLine1 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.messageText { fill: rgb(51, 51, 51); stroke: none;}
.note { stroke: rgb(110, 170, 73); fill: rgb(255, 245, 173);}
.noteText { fill: black; stroke: none; font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor15" x1="75" y1="5" x2="75" y2="469" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><line id="actor16" x1="275" y1="5" x2="275" y2="469" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Bob</div></div></foreignobject><text x="275" y="37.5" class="actor" style="text-anchor: middle;">Bob</text></switch></g><g><line id="actor17" x1="475" y1="5" x2="475" y2="469" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="400" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="400" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="475" y="37.5" class="actor" style="text-anchor: middle;">John</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="93" class="messageText" style="text-anchor: middle;">Hello Bob, how are you?</text><line x1="75" y1="100" x2="275" y2="100" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="375" y="128" class="messageText" style="text-anchor: middle;">How about you John?</text><line x1="275" y1="135" x2="475" y2="135" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><text x="175" y="163" class="messageText" style="text-anchor: middle;">I am good thanks!</text><line x1="275" y1="170" x2="75" y2="170" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#crosshead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><text x="375" y="198" class="messageText" style="text-anchor: middle;">I am good thanks!</text><line x1="275" y1="205" x2="475" y2="205" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#crosshead)" style="fill: none;"></line></g><g><rect x="500" y="215" fill="#EDF2AE" stroke="#666" width="150" height="99" rx="0" ry="0" class="note"></rect><text x="516" y="243" fill="black" class="noteText"><tspan x="516">Bob thinks a long</tspan><tspan dy="21" x="516">long time, so long</tspan><tspan dy="21" x="516">that the text does</tspan><tspan dy="21" x="516">not fit on a row.</tspan></text></g><g><text x="175" y="342" class="messageText" style="text-anchor: middle;">Checking with John...</text><line x1="275" y1="349" x2="75" y2="349" class="messageLine1" stroke-width="2" stroke="black" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><text x="275" y="377" class="messageText" style="text-anchor: middle;">Yes... John, how are you?</text><line x1="75" y1="384" x2="475" y2="384" class="messageLine0" stroke-width="2" stroke="black" style="fill: none;"></line></g><g><rect x="0" y="404" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="404" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="441.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><rect x="200" y="404" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="404" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Bob</div></div></foreignobject><text x="275" y="441.5" class="actor" style="text-anchor: middle;">Bob</text></switch></g><g><rect x="400" y="404" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="400" y="404" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="475" y="441.5" class="actor" style="text-anchor: middle;">John</text></switch></g></svg></div><h2 id="loops-alt-and-opt">Loops, alt and opt</h2>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Sequence</span> <span class="hljs-tag">diagram</span> <span class="hljs-tag">code</span>
<span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">loop</span> <span class="hljs-tag">Daily</span> <span class="hljs-tag">query</span>
        <span class="hljs-tag">Alice-</span>&gt;&gt;<span class="hljs-tag">Bob</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">Bob</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
        <span class="hljs-tag">alt</span> <span class="hljs-tag">is</span> <span class="hljs-tag">sick</span>
            <span class="hljs-tag">Bob-</span>&gt;&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Not</span> <span class="hljs-tag">so</span> <span class="hljs-tag">good</span> <span class="hljs-pseudo">:(</span>
        <span class="hljs-tag">else</span> <span class="hljs-tag">is</span> <span class="hljs-tag">well</span>
            <span class="hljs-tag">Bob-</span>&gt;&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Feeling</span> <span class="hljs-tag">fresh</span> <span class="hljs-tag">like</span> <span class="hljs-tag">a</span> <span class="hljs-tag">daisy</span>
        <span class="hljs-tag">end</span>

        <span class="hljs-tag">opt</span> <span class="hljs-tag">Extra</span> <span class="hljs-tag">response</span>
            <span class="hljs-tag">Bob-</span>&gt;&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Thanks</span> <span class="hljs-tag">for</span> <span class="hljs-tag">asking</span>
        <span class="hljs-tag">end</span>
    <span class="hljs-tag">end</span></code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart37" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:450px;" viewBox="-50 -10 450 426"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
.messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.messageText { fill: rgb(51, 51, 51); stroke: none;}
.labelBox { stroke: rgb(50, 105, 50); fill: rgb(205, 228, 152);}
.labelText { fill: black; stroke: none;}
.loopText { fill: black; stroke: none;}
.loopLine { stroke-width: 2; stroke: rgb(50, 105, 50);}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor18" x1="75" y1="5" x2="75" y2="415" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><line id="actor19" x1="275" y1="5" x2="275" y2="415" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Bob</div></div></foreignobject><text x="275" y="37.5" class="actor" style="text-anchor: middle;">Bob</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="118" class="messageText" style="text-anchor: middle;">Hello Bob, how are you?</text><line x1="75" y1="125" x2="275" y2="125" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="175" y="178" class="messageText" style="text-anchor: middle;">Not so good :(</text><line x1="275" y1="185" x2="75" y2="185" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="175" y="233" class="messageText" style="text-anchor: middle;">Feeling fresh like a daisy</text><line x1="275" y1="240" x2="75" y2="240" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><line x1="65" y1="135" x2="285" y2="135" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="285" y1="135" x2="285" y2="250" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="250" x2="285" y2="250" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="135" x2="65" y2="250" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="195" x2="285" y2="195" stroke-width="2" stroke="#526e52" class="loopLine"></line><rect x="65" y="135" fill="#526e52" stroke="none" width="50" height="20" rx="0" ry="0" class="labelBox"></rect><text x="72.5" y="150" fill="white" class="labelText"><tspan x="72.5">alt</tspan></text><text x="175" y="150" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175">[ is sick ]</tspan></text><text x="175" y="210" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175">[ is well ]</tspan></text></g><g><text x="175" y="303" class="messageText" style="text-anchor: middle;">Thanks for asking</text><line x1="275" y1="310" x2="75" y2="310" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><line x1="65" y1="260" x2="285" y2="260" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="285" y1="260" x2="285" y2="320" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="320" x2="285" y2="320" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="260" x2="65" y2="320" stroke-width="2" stroke="#526e52" class="loopLine"></line><rect x="65" y="260" fill="#526e52" stroke="none" width="50" height="20" rx="0" ry="0" class="labelBox"></rect><text x="72.5" y="275" fill="white" class="labelText"><tspan x="72.5">opt</tspan></text><text x="175" y="275" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175">[ Extra response ]</tspan></text></g><g><line x1="55" y1="75" x2="295" y2="75" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="295" y1="75" x2="295" y2="330" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="55" y1="330" x2="295" y2="330" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="55" y1="75" x2="55" y2="330" stroke-width="2" stroke="#526e52" class="loopLine"></line><rect x="55" y="75" fill="#526e52" stroke="none" width="50" height="20" rx="0" ry="0" class="labelBox"></rect><text x="62.5" y="90" fill="white" class="labelText"><tspan x="62.5">loop</tspan></text><text x="175" y="90" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175">[ Daily query ]</tspan></text></g><g><rect x="0" y="350" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="350" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="387.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><rect x="200" y="350" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="350" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Bob</div></div></foreignobject><text x="275" y="387.5" class="actor" style="text-anchor: middle;">Bob</text></switch></g></svg></div><h2 id="message-to-self-in-loop">Message to self in loop</h2>
<pre class="css"><code class="hljs">%% <span class="hljs-tag">Sequence</span> <span class="hljs-tag">diagram</span> <span class="hljs-tag">code</span>
<span class="hljs-tag">sequenceDiagram</span>
    <span class="hljs-tag">participant</span> <span class="hljs-tag">Alice</span>
    <span class="hljs-tag">participant</span> <span class="hljs-tag">Bob</span>
    <span class="hljs-tag">Alice-</span>&gt;&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Hello</span> <span class="hljs-tag">John</span>, <span class="hljs-tag">how</span> <span class="hljs-tag">are</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">loop</span> <span class="hljs-tag">Healthcheck</span>
        <span class="hljs-tag">John-</span>&gt;&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Fight</span> <span class="hljs-tag">against</span> <span class="hljs-tag">hypochondria</span>
    <span class="hljs-tag">end</span>
    <span class="hljs-tag">Note</span> <span class="hljs-tag">right</span> <span class="hljs-tag">of</span> <span class="hljs-tag">John</span>: <span class="hljs-tag">Rational</span> <span class="hljs-tag">thoughts</span>&lt;<span class="hljs-tag">br</span>/&gt;<span class="hljs-tag">prevail</span>...
    <span class="hljs-tag">John--</span>&gt;&gt;<span class="hljs-tag">Alice</span>: <span class="hljs-tag">Great</span>!
    <span class="hljs-tag">John-</span>&gt;&gt;<span class="hljs-tag">Bob</span>: <span class="hljs-tag">How</span> <span class="hljs-tag">about</span> <span class="hljs-tag">you</span>?
    <span class="hljs-tag">Bob--</span>&gt;&gt;<span class="hljs-tag">John</span>: <span class="hljs-tag">Jolly</span> <span class="hljs-tag">good</span>!</code></pre><div class="mermaid" data-processed="true"><svg id="mermaidChart38" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:750px;" viewBox="-50 -10 750 468"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.actor { stroke: rgb(19, 84, 12); fill: rgb(205, 228, 152);}
text.actor { fill: black; stroke: none;}
.actor-line { stroke: grey;}
.messageLine0 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
.messageLine1 { stroke-width: 1.5; stroke: rgb(51, 51, 51);}
#arrowhead { fill: rgb(51, 51, 51);}
#crosshead path { fill: rgb(51, 51, 51) !important; stroke: rgb(51, 51, 51) !important;}
.messageText { fill: rgb(51, 51, 51); stroke: none;}
.labelBox { stroke: rgb(50, 105, 50); fill: rgb(205, 228, 152);}
.labelText { fill: black; stroke: none;}
.loopText { fill: black; stroke: none;}
.loopLine { stroke-width: 2; stroke: rgb(50, 105, 50);}
.note { stroke: rgb(110, 170, 73); fill: rgb(255, 245, 173);}
.noteText { fill: black; stroke: none; font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px;}
/*  */
</style><g></g><g><line id="actor20" x1="75" y1="5" x2="75" y2="457" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="37.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><line id="actor21" x1="275" y1="5" x2="275" y2="457" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Bob</div></div></foreignobject><text x="275" y="37.5" class="actor" style="text-anchor: middle;">Bob</text></switch></g><g><line id="actor22" x1="475" y1="5" x2="475" y2="457" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="400" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="400" y="0" width="150" height="65"><div style="display: table; height: 100%; width: 100%;" xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="475" y="37.5" class="actor" style="text-anchor: middle;">John</text></switch></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="275" y="93" class="messageText" style="text-anchor: middle;">Hello John, how are you?</text><line x1="75" y1="100" x2="475" y2="100" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="475" y="153" class="messageText" style="text-anchor: middle;">Fight against hypochondria</text><path d="M 475,160 C 535,150 535,190 475,180" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></path></g><g><line x1="365" y1="110" x2="585" y2="110" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="585" y1="110" x2="585" y2="200" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="365" y1="200" x2="585" y2="200" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="365" y1="110" x2="365" y2="200" stroke-width="2" stroke="#526e52" class="loopLine"></line><rect x="365" y="110" fill="#526e52" stroke="none" width="50" height="20" rx="0" ry="0" class="labelBox"></rect><text x="372.5" y="125" fill="white" class="labelText"><tspan x="372.5">loop</tspan></text><text x="475" y="125" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="475">[ Healthcheck ]</tspan></text></g><g><rect x="500" y="210" fill="#EDF2AE" stroke="#666" width="150" height="57" rx="0" ry="0" class="note"></rect><text x="516" y="238" fill="black" class="noteText"><tspan x="516">Rational thoughts</tspan><tspan dy="21" x="516">prevail...</tspan></text></g><g><text x="275" y="295" class="messageText" style="text-anchor: middle;">Great!</text><line x1="475" y1="302" x2="75" y2="302" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><text x="375" y="330" class="messageText" style="text-anchor: middle;">How about you?</text><line x1="475" y1="337" x2="275" y2="337" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="375" y="365" class="messageText" style="text-anchor: middle;">Jolly good!</text><line x1="275" y1="372" x2="475" y2="372" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><rect x="0" y="392" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="0" y="392" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Alice</div></div></foreignobject><text x="75" y="429.5" class="actor" style="text-anchor: middle;">Alice</text></switch></g><g><rect x="200" y="392" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="200" y="392" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">Bob</div></div></foreignobject><text x="275" y="429.5" class="actor" style="text-anchor: middle;">Bob</text></switch></g><g><rect x="400" y="392" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><switch><foreignobject x="400" y="392" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">John</div></div></foreignobject><text x="475" y="429.5" class="actor" style="text-anchor: middle;">John</text></switch></g></svg></div>
<h1 id="mermaidapi">mermaidAPI</h1>
<p>This is the api to be used when handling the integration with the web page instead of using the default integration<br>(mermaid.js).</p>
<p>The core of this api is the <strong>render</strong> function that given a graph definitionas text renders the graph/diagram and<br>returns a svg element for the graph. It is is then up to the user of the API to make use of the svg, either insert it<br>somewhere in the page or something completely different.</p>
<h2 id="configuration">Configuration</h2>
<p>These are the default options which can be overridden with the initialization call as in the example below:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaid</span><span class="hljs-class">.initialize</span>(<span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">flowchart</span>:<span class="hljs-value">{
     htmlLabels: false
  </span></span></span>}
});</code></pre><p>logLevel , decides the amount of logging to be used.</p>
<ul>
<li>debug: 1</li>
<li>info: 2</li>
<li>warn: 3</li>
<li>error: 4</li>
<li>fatal: 5<br><strong>cloneCssStyles</strong> - This options controls whether or not the css rules should be copied into the generated svg<br><strong>startOnLoad</strong> - This options controls whether or mermaid starts when the page loads<br><strong>arrowMarkerAbsolute</strong> - This options controls whether or arrow markers in html code will be absolute paths or<br>an anchor, #. This matters if you are using base tag settings.<h3 id="flowchart">flowchart</h3>
<em>The object containing configurations specific for flowcharts</em><br><strong>htmlLabels</strong> - Flag for setting whether or not a html tag should be used for rendering labels<br>on the edges<br><strong>useMaxWidth</strong> - Flag for setting whether or not a all available width should be used for<br>the diagram.<h3 id="sequencediagram">sequenceDiagram</h3>
The object containing configurations specific for sequence diagrams<br><strong>diagramMarginX</strong> - margin to the right and left of the sequence diagram<br><strong>diagramMarginY</strong> - margin to the over and under the sequence diagram<br><strong>actorMargin</strong> - Margin between actors<br><strong>width</strong> - Width of actor boxes<br><strong>height</strong> - Height of actor boxes<br><strong>boxMargin</strong> - Margin around loop boxes<br><strong>boxTextMargin</strong> - margin around the text in loop/alt/opt boxes<br><strong>noteMargin</strong> - margin around notes<br><strong>messageMargin</strong> - Space between messages<br><strong>mirrorActors</strong> - mirror actors under diagram<br><strong>bottomMarginAdj</strong> - Depending on css styling this might need adjustment.<br>Prolongs the edge of the diagram downwards<br><strong>useMaxWidth</strong> - when this flag is set the height and width is set to 100% and is then scaling with the<br>available space if not the absolute space required is used<h3 id="gantt">gantt</h3>
The object containing configurations specific for gantt diagrams<em><br><strong>titleTopMargin</strong> - margin top for the text over the gantt diagram<br><strong>barHeight</strong> - the height of the bars in the graph<br><strong>barGap</strong> - the margin between the different activities in the gantt diagram<br><strong>topPadding</strong> - margin between title and gantt diagram and between axis and gantt diagram.<br><strong>leftPadding</strong> - the space allocated for the section name to the left of the activities.<br><strong>gridLineStartPadding</strong> - Vertical starting position of the grid lines<br><strong>fontSize</strong> - font size ...<br><strong>fontFamily</strong> - font family ...<br><strong>numberSectionStyles</strong> - the number of alternating section styles<br><em>*axisFormatter</em></em> - formatting of the axis, this might need adjustment to match your locale and preferences<h2 id="parse">parse</h2>
Function that parses a mermaid diagram definition. If parsing fails the parseError callback is called and an error is<br>thrown and<h2 id="version">version</h2>
Function returning version information<br>##render<br>Function that renders an svg with a graph from a chart definition. Usage example below.</li>
</ul>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaidAPI</span><span class="hljs-class">.initialize</span>(<span class="hljs-rules">{
     <span class="hljs-rule"><span class="hljs-attribute">startOnLoad</span>:<span class="hljs-value">true
 </span></span></span>});
 $(<span class="hljs-tag">function</span>()<span class="hljs-rules">{
     <span class="hljs-rule"><span class="hljs-attribute">var graphDefinition = 'graph TB\na--&gt;b';
     var cb = function(svgGraph){
         console.log(svgGraph);
     };
     mermaidAPI.render('id1',graphDefinition,cb);
 });</span></span></span></code></pre>
<h1 id="development">Development</h1>
<h2 id="updating-the-documentation">Updating the documentation</h2>
<h2 id="getting-the-development-environment-up">Getting the development environment up</h2>
<ol>
<li>Fork the gh-pages branch in the the mermaid repository</li>
<li>Do npm install</li>
</ol>
<h2 id="working-with-the-documentation">Working with the documentation</h2>
<p>The html files are generated from the source and the markdown files in the docs folder. The site generation is done<br>using the docker.js framework with the command below.</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">docker</span> <span class="hljs-tag">-i</span> ../<span class="hljs-tag">mermaid</span>/ <span class="hljs-tag">-x</span> "*<span class="hljs-tag">git</span>*|*<span class="hljs-tag">travis</span>*|*<span class="hljs-tag">bin</span>*|*<span class="hljs-tag">dist</span>*|*<span class="hljs-tag">node_modules</span>*|*<span class="hljs-tag">gulp</span>*|*<span class="hljs-tag">lib</span>*|*<span class="hljs-tag">editor</span>*|*<span class="hljs-tag">conf</span>*|*<span class="hljs-tag">scripts</span>*|*<span class="hljs-tag">test</span>*|*<span class="hljs-tag">htmlDocs</span>*" <span class="hljs-tag">--extras</span> <span class="hljs-tag">mermaid</span> <span class="hljs-tag">-w</span> <span class="hljs-tag">-o</span> <span class="hljs-tag">htmlDocs</span></code></pre><p>Thus ... One important thing to remember. <em> Do not edit the html files directly! </em> Those changes will be overwritten<br>when the site is re-generated.</p>
<h2 id="committing-the-changes">Committing the changes</h2>
<p>Do a pull request to merge the changes to the site.</p>
<h2 id="things-to-be-done-in-order-to-add-a-new-diagram-type">Things to be done in order to add a new diagram type</h2>
<h3 id="step-1-grammar-parsing">Step 1: Grammar &amp; Parsing</h3>
<h4 id="grammar">Grammar</h4>
<p>This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.</p>
<p>For instance:</p>
<ul>
<li>the flowchart starts with the keyword graph.</li>
<li>the sequence diagram starts with the keyword sequenceDiagram</li>
</ul>
<h4 id="store-data-found-during-parsing">Store data found during parsing</h4>
<p>There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer. You can during the parsing call a object provided to the parser by the user of the parser. This object can be called during parsing for storing data.</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">statement</span>
    : '<span class="hljs-tag">participant</span>' <span class="hljs-tag">actor</span>  <span class="hljs-rules">{ <span class="hljs-rule">$$='<span class="hljs-attribute">actor'; }
    | signal               { $$='signal'; }
    | note_statement       { $$='note';  }
    | 'title' message      { yy.setTitle($2);  }
    ;</span></span></span></code></pre><p>In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.</p>
<p><strong>Note:</strong> Make sure that the parseError function for the parser is defined and calling mermaidPAI.parseError this way a common way of detecting parse errors is provided for the end-user.</p>
<p>For more info look in the example diagram type:</p>
<p>The yy object has the following function:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">exports</span><span class="hljs-class">.parseError</span> = <span class="hljs-tag">function</span>(<span class="hljs-tag">err</span>,<span class="hljs-tag">hash</span>)<span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">mermaidAPI.parseError(err,hash);
};</span></span></span></code></pre><p>when parsing the yy object is initialized as per below:</p>
<pre class="css"><code class="hljs">    <span class="hljs-tag">var</span> <span class="hljs-tag">parser</span>;
    <span class="hljs-tag">parser</span> = <span class="hljs-tag">exampleParser</span><span class="hljs-class">.parser</span>;
    <span class="hljs-tag">parser</span><span class="hljs-class">.yy</span> = <span class="hljs-tag">db</span>;</code></pre><h3 id="step-2-rendering">Step 2: Rendering</h3>
<p>Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequendeRenderer.js rather then the flowchart renderer as this is a more generic example.</p>
<p>Place the renderer in the diagram folder.</p>
<h3 id="step-3-detection-of-the-new-diagram-type">Step 3: Detection of the new diagram type</h3>
<p>The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.</p>
<h3 id="step-4-the-final-piece-triggering-the-rendering">Step 4: The final piece - triggering the rendering</h3>
<p>At this point when mermaid is trying to render the diagram, it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step number 2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument.</p>
<h2 id="usage-of-the-parser-as-a-separate-module">Usage of the parser as a separate module</h2>
<h3 id="setup">Setup</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">var</span> <span class="hljs-tag">graph</span> = <span class="hljs-tag">require</span>('./<span class="hljs-tag">graphDb</span>');
<span class="hljs-tag">var</span> <span class="hljs-tag">flow</span> = <span class="hljs-tag">require</span>('./<span class="hljs-tag">parser</span>/<span class="hljs-tag">flow</span>');
<span class="hljs-tag">flow</span><span class="hljs-class">.parser</span><span class="hljs-class">.yy</span> = <span class="hljs-tag">graph</span>;</code></pre><h3 id="parsing">Parsing</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">flow</span><span class="hljs-class">.parser</span><span class="hljs-class">.parse</span>(<span class="hljs-tag">text</span>);</code></pre><h3 id="data-extraction">Data extraction</h3>
<pre class="css"><code class="hljs">// <span class="hljs-tag">Javascript</span> <span class="hljs-tag">example</span>
<span class="hljs-tag">graph</span><span class="hljs-class">.getDirection</span>();
<span class="hljs-tag">graph</span><span class="hljs-class">.getVertices</span>();
<span class="hljs-tag">graph</span><span class="hljs-class">.getEdges</span>();</code></pre><p>The parser is also exposed in the mermaid api by calling:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">var</span> <span class="hljs-tag">parser</span> = <span class="hljs-tag">mermaid</span><span class="hljs-class">.getParser</span>();</code></pre><p>Note that the parse needs a graph object to store the data as per:</p>
<pre class="css"><code class="hljs"><span class="hljs-tag">flow</span><span class="hljs-class">.parser</span><span class="hljs-class">.yy</span> = <span class="hljs-tag">graph</span>;</code></pre><p>Look at graphDb.js for more details on that object.</p>

<h1 id="upgrading-to-from-version-0-4-0">Upgrading to from version -0.4.0</h1>
<p>Some of the interfaces has been upgraded.</p>
<h2 id="initialization">Initialization</h2>
<p>mermaid_config is no longer used. Instead a call to mermaid initialize is done as in the example below:</p>
<h3 id="version-0-4-0">version 0.4.0</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaid_config</span> = <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">startOnLoad</span>:<span class="hljs-value">true
    </span></span></span>};</code></pre><h3 id="will-look-like-below-in-version-0-5-0">will look like below in version 0.5.0</h3>
<pre class="css"><code class="hljs"><span class="hljs-tag">mermaid</span><span class="hljs-class">.initialize</span>(<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">startOnLoad</span>:<span class="hljs-value">true
</span></span></span>});</code></pre>

    </code></code></div><code><code>
    <div class="dark-box">
        <div class="lang-selector">
            <a href="http://knsv.github.io/mermaid/#" data-language-name="shell">shell</a>
            <a href="http://knsv.github.io/mermaid/#" data-language-name="ruby">ruby</a>
            <a href="http://knsv.github.io/mermaid/#" data-language-name="python">python</a>
        </div>
    </div>
</code></code></div><code><code>


</code></code><audio controls="controls" style="display: none;"></audio><div id="__fanyixia_content" style="display: none;"><div data-reactroot="" class="__icon" title="点击翻译"><img src="chrome-extension://fapgabkkfcaejckbfmfcdgnfefbmlion/static/media/icon.svg" alt="icon" width="16" height="16"></div></div><div class="mermaidTooltip" style="opacity: 0;"></div></body><style type="text/css">#yddContainer{display:block;font-family:Microsoft YaHei;position:relative;width:100%;height:100%;top:-4px;left:-4px;font-size:12px;border:1px solid}#yddTop{display:block;height:22px}#yddTopBorderlr{display:block;position:static;height:17px;padding:2px 28px;line-height:17px;font-size:12px;color:#5079bb;font-weight:bold;border-style:none solid;border-width:1px}#yddTopBorderlr .ydd-sp{position:absolute;top:2px;height:0;overflow:hidden}.ydd-icon{left:5px;width:17px;padding:0px 0px 0px 0px;padding-top:17px;background-position:-16px -44px}.ydd-close{right:5px;width:16px;padding-top:16px;background-position:left -44px}#yddKeyTitle{float:left;text-decoration:none}#yddMiddle{display:block;margin-bottom:10px}.ydd-tabs{display:block;margin:5px 0;padding:0 5px;height:18px;border-bottom:1px solid}.ydd-tab{display:block;float:left;height:18px;margin:0 5px -1px 0;padding:0 4px;line-height:18px;border:1px solid;border-bottom:none}.ydd-trans-container{display:block;line-height:160%}.ydd-trans-container a{text-decoration:none;}#yddBottom{position:absolute;bottom:0;left:0;width:100%;height:22px;line-height:22px;overflow:hidden;background-position:left -22px}.ydd-padding010{padding:0 10px}#yddWrapper{color:#252525;z-index:10001;background:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ab20.png);}#yddContainer{background:#fff;border-color:#4b7598}#yddTopBorderlr{border-color:#f0f8fc}#yddWrapper .ydd-sp{background-image:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ydd-sprite.png)}#yddWrapper a,#yddWrapper a:hover,#yddWrapper a:visited{color:#50799b}#yddWrapper .ydd-tabs{color:#959595}.ydd-tabs,.ydd-tab{background:#fff;border-color:#d5e7f3}#yddBottom{color:#363636}#yddWrapper{min-width:250px;max-width:400px;}</style></html>